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

您好，我有一个关于我的代码的问题，因为我想实现以下复选框，并在其周围添加一个可点击的下拉列表（我在youtube上录制了该列表以向您展示）：

链接：

我还将代码放在了JSFIDLE中，下面是它的链接：

我还将把代码放在这里（但我不能放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>

---

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

你在找这样的东西吗

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

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

编辑：

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

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

---

几乎是因为悬停部分未命中。因此，当我将鼠标悬停在复选框附近时，会显示一个箭头。当我点击它时，它会显示一个下拉列表。我已经尝试在代码中隐藏按钮，但是我也隐藏了复选框。。我其实不想要。嗨，再次感谢你的反应。但它仍然不一样，因为当下拉菜单显示时，当我将鼠标悬停在远离按钮的位置时，“插入符号”箭头就会出现。这不应该发生。如果出现“插入符号”箭头，按钮也会更改。这也不应该发生。。如果我说的最后一句话太多，那么我不介意。当你说按钮“更改”时，你指的是它如何调整大小以适应插入符号？顺便说一句，我再次更新了提琴，并加入了代码注释来解释javascript。是的，我指的是按钮的形状。当我停在它旁边时，它会从一个正方形变成一个矩形。但我仍然看到了改进：）。

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