Question

我遇到了Bootstrap 3的问题，我使用手风琴嵌套了一个导航列表菜单。但是，它并没有像我希望的那样表现。有两种情况我似乎无法弄清楚：

我选择Main 1，然后打开Main 2并选择Sub 1（Main1应该被取消选择）
我点击Sub 1，然后选择Main 1（Sub 1应该是取消选择，主要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>

非常感谢你的帮助。

Answer 1

到最后，似乎还需要一些额外的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>

可能有更好的方法，但这通过添加一些额外的点击条件来涵盖上述两种情况。现在，它在导航到另一个菜单/子菜单项时正确折叠，并且仅在单击导航项时取消选择（而不是在我只是'浏览'折叠菜单时）

选择父级时，Bootstrap 3中的嵌套手风琴列表未取消选择

1 个答案: