在不影响布局的情况下，如何在选项1、选项2等中添加链接?

This is being used in Bootstrap 3.0 template.

这在Bootstrap 3.0模板中使用。

The code was working fine until I tried putting links into the options part.

代码运行良好，直到我尝试将链接放入选项部分。

The display went back to basic when I tried <li><a href="">Option 1</a></li>, help?

当我尝试

选项1

选1项

，有帮助吗?

HTML code:

HTML代码:

<a class="btn btn-default btn-select btn-select-light">
    <input type="hidden" class="btn-select-input" id="" name="" value="" />
    <span class="btn-select-value">Select Workshop</span>
    <span class="btn-select-arrow glyphicon glyphicon-chevron-down"></span>
    <ul>
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
    </ul>
</a>

Javascript code:

Javascript代码:

$(document).on('click', '.btn-select', function (e) {
e.preventDefault();
var ul = $(this).find("ul");
if ($(this).hasClass("active")) {
    if (ul.find("li").is(e.target)) {
        var target = $(e.target);
        target.addClass("selected").siblings().removeClass("selected");
        var value = target.html();
        $(this).find(".btn-select-input").val(value);
        $(this).find(".btn-select-value").html(value);
    }
    ul.hide();
    $(this).removeClass("active");
}
else {
    $('.btn-select').not(this).each(function () {
        $(this).removeClass("active").find("ul").hide();
    });
    ul.slideDown(300);
    $(this).addClass("active");
}

});

$(document).on('click', function (e) {
var target = $(e.target).closest(".btn-select");
if (!target.length) {
    $(".btn-select").removeClass("active").find("ul").hide();
}

});

1 个解决方案

#1

Nested links are illegal

嵌套的链接是非法的

Links and anchors defined by the <a> element must not be nested; an anchor element must not contain any other anchor elements.

不能嵌套元素定义的链接和锚;锚点元素不能包含任何其他锚点元素。

When you add a link inside the option, you are trying to do the same. Which isn't the correct approach

当您在选项中添加链接时，您也在尝试执行相同的操作。哪种方法不正确

Use it as

把它作为

<div class="btn btn-default btn-select btn-select-light">
    <input type="hidden" class="btn-select-input" id="" name="" value="" />
    <span class="btn-select-value">Select Workshop</span>
    <span class="btn-select-arrow glyphicon glyphicon-chevron-down"></span>
    <ul>
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
        <li><a href="#">Option 4</a></li>
    </ul>
</div>

#1