我在使用 Accordion 嵌套导航列表菜单时遇到 Bootstrap 3 问题。但是，它的行为并不像我希望的那样。有两种情况我似乎无法弄清楚:
- 我选择 Main 1，然后打开 Main 2 并选择 Sub 1(Main1 应该 被取消)
- 我点击 Sub 1，然后选择 Main 1(Sub 1 应该是 取消选择，Main 2 应该折叠)
其他一切似乎都按预期工作，但我想知道我是否在 Bootstrap 3 的功能之外操作，或者只是做错了。
如果做不到这一点，也许我可以对 Bootstrap JS 进行调整以获得预期的功能？
这是我目前所拥有的:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<style>
/* sidenav deselected */
.bs-sidebar .nav > li > a {
color: #000000;
padding: 10px;
margin: 5px 0px 5px 0px;
}
/* sidenav selected */
.bs-sidebar .nav > .active > a,
.bs-sidebar .nav > .active:hover > a,
.bs-sidebar .nav > .active:focus > a,
.bs-sidebar .nav > li > a:hover,
.bs-sidebar .nav > li > a:focus {
color: #ffffff;
background-color: #205f9f;
text-decoration: underline;
border-radius: 4px;
padding: 10px;
margin: 5px 0px 5px 0px;
}
/* sidenav 2nd layer overwrites */
.bs-sidebar .nav .nav > li > a,
.bs-sidebar .nav .nav > li > a:hover {
font-size: 90%;
padding: 5px 0px 5px 30px;
margin: 5px 5px 5px 5px;
}
</style>
</head>
<body>
<div class="panel-body">
<div class="bs-sidebar">
<ul class="nav bs-sidenav">
<li><a href="#Main1" data-toggle="tab">Main 1</a></li>
<li><a href="#Main2" data-toggle="collapse">Main 2 <b class="caret"></b></a>
<ul class="subnav nav panel-collapse collapse" id="Main2">
<li><a href="#sub1" data-toggle="tab">Sub 1</a></li>
<li><a href="#sub2" data-toggle="tab">Sub 2</a></li>
<li><a href="#sub3" data-toggle="tab">Sub 3</a></li>
</ul>
</li>
<li><a href="#Main3" data-toggle="tab">Main 3</a></li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
非常感谢您的帮助。
最佳答案
最后到达那里，似乎需要一些额外的 JavaScript 才能让它工作:
<script type='text/javascript'>
$(window).load(function(){
// when nav list is clicked
$('.bs-sidebar .nav > li > ul > li > a').on('click',function(){
// remove child selection
$(this).closest('.bs-sidenav').find('.active').removeClass('active');
});
// when parents are clicked
$('.nav.bs-sidenav > li > a').on('click',function(){
// if this selection is a nav item
if ($(this).attr('data-toggle') == "tab"){
// deactivate the old sub item
$(this).closest('.nav.bs-sidenav').find('.active').removeClass('active');
}
// collapse subnav
$('.subnav.in').collapse('hide');
});
});
</script>
可能有更好的方法，但它通过添加一些额外的点击条件来涵盖上述两种情况。现在，当导航到另一个菜单/子菜单项时它会正确折叠，并且仅在单击导航项时取消选择(而不是当我只是“浏览”折叠菜单时)
关于javascript - Bootstrap 3 中的嵌套 Accordion 列表在选择父项时未取消选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21308765/