Question

您好我对我的代码提出了一个问题，因为我想通过一个可点击的下拉列表来实现以下复选框（我已经在youtube上录制了这些给你看）：

link：https://www.youtube.com/watch?v=ZodCcVHCAUo&feature=youtu.be

我还把代码放在jsfiddle中，所以这里是它的链接： http://jsfiddle.net/yomacho/ghv5aosv/

我也会把代码放在这里（但是我不能把它放到bootstrap.min.js，因为它太长了所以你需要去我上面给出的链接）：

html：

<div class="col-md-1">
    <li>
        <div id="ButtonDropDown" href="#" class="ButtonDropDown">
            <input type="checkbox" class="check">
                <select class="showDropdown">
                    <option value="volvo" >Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select>
        </div>

        <div class="btn-group">
            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>

            </button>

            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>                  
    </li>
</div>

和css：

.showDropdown{
    display: none;
}

.ButtonDropDown:hover .showDropdown{
    display: block;
}

#ButtonDropDown{
    display: inline-block;
    background: #ddd;
    border: 1px solid #ccc;
    padding: 5px 10px;
    color: blue;
    cursor: pointer;
}
.showDropdown{
    width: 15px;
}

如果有人也知道如何制作响应版本，我真的很感激。如果有人知道它没有响应的版本，那么我也很乐意也想知道它。因为我只是好奇它嘿嘿。无论如何，谢谢你的回答。

Answer 1

你正在寻找这样的东西吗？ http://jsfiddle.net/nklein/Lm0t1aa8/

以下javascript会阻止您在单击复选框时打开下拉列表，但允许选中此框。

$('.check').on('click', function (ev) {
    ev.stopPropagation();
});

编辑：

我已经更新了jsfiddle，当你悬停/停止悬停在元素上时，以下事件将添加/删除“插入符号”箭头。

$('#selCars').on('mouseover', function (ev) {
    $('#selCars .caret-hover').addClass('caret');
});
$('#selCars').on('mouseout', function (ev) {
    $('#selCars .caret-hover').removeClass('caret');
});

带有可点击的下拉列表的复选框

1 个答案: