我无法弄清楚第二个复选框无效的原因。我确定它与Bootstrap / CSS有关,这不是我的强项。
第一个复选框按预期工作,但是当我将复选框放在nav-pills中时会发生一些事情。有人可以帮助我吗?
HTML:
<div class="checkbox">
<label>
<input type="checkbox">Testcheckbox
</label>
</div>
<ul id="menu" class="nav nav-pills nav-stacked">
<li class="nav-divider"></li>
<li>
<a class="nav-menu-container" data-toggle="collapse" data-parent="#menu" href="#sub-menu">
Sub-Menu
<div class="sub-menu-caret-container"><span class="caret arrow"></span></div>
</a>
</li>
<ul class="nav nav-pills nav-stacked collapse in" id="sub-menu">
<li data-toggle="collapse" data-parent="#sub-menu" href="#pv11">
<div class="nav-sub-menu-container">
<div class="checkbox">
<label>
<input type="checkbox">Testcheckbox
</label>
</div>
</div>
</li>
<li data-toggle="collapse" data-parent="#sub-menu" href="#pv11"><a id="item1" class="nav-sub-menu-container" href="#">Item 2</a></li>
<li data-toggle="collapse" data-parent="#sub-menu" href="#pv11"><a id="item2" class="nav-sub-menu-container" href="#">Item 3</a></li>
<li data-toggle="collapse" data-parent="#sub-menu" href="#item3"><a class="nav-sub-menu-container" href="#">Item 4</a></li>
</ul>
<li class="nav-divider"></li>
</ul>
CSS:
.sub-menu-caret-container {
float: right;
}
.nav-menu-container {
font-weight: bold;
}
ul.nav-stacked ul.nav-stacked > li > .nav-sub-menu-container {
padding-left: 30px;
}
答案 0 :(得分:1)
父data-toggle
上的li
会覆盖复选框点击。
答案 1 :(得分:1)
这就是我解决问题的方式
$('your-checkbox-selector').mouseover(function(){
$(this).parents('a.nav-link ').removeAttr('data-toggle')
}).mouseout(function(){
$(this).parents('a.nav-link ').attr('data-toggle','pill')
});