Javascript 在移动视图中，默认情况下引导菜单不会折叠

我试图用twitter bootstrap 3.0实现一个自动折叠的垂直导航

基本功能正常（窗口大小=顶部的菜单，就像它应该的那样），但问题是如果我在引导中使用默认的导航栏功能，它不会像现在那样折叠

<div class="container-fluid">

        <div class="row">
            <div class="navbar-brand">
                <a href="<g:createLink uri="/" absolute="true" />">BABSI</a>
            </div>
            <button type="button" class="btn navbar-btn" data-toggle="collapse"
                    data-target="#sidebar">TOOGLE

                    Toggle navigation
                    <span class="icon-bar"></span> <span class="icon-bar"></span> 
                    <span class="icon-bar"></span>
                </button>
        </div>
        <div class="row">
            <header id="sidebar" class="col-md-2 collapse">

                <div class="row">

                                    <!-- generates ul structure -->
                    <nav:primary class="nav navbar-inverse nav-stacked" />
                </div>
            </header>
            <section id="content" class="col-md-10">
                <div class="row"></div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <g:layoutTitle />
                    </div>
                    <div class="panel-body">
                        <g:layoutBody />
                    </div>
                </div>
            </section>
        </div>
    </div>

图格尔
切换导航

您需要在nav中使用

.navbar collapse

类，因为该类设置为在给定断点处折叠

我对您的标记做了一些更改以适应这种情况，并添加了一个

.navbar

容器，以便您可以轻松使用按钮上的

.navbar toggle

类：

<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-brand"> 
            <a href="#">BABSI</a>
        </div>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar .navbar-collapse"> 
            <span class="icon-bar"></span>  
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="row">
        <header id="sidebar" class="col-md-2">
            <div class="collapse navbar-collapse">
                <!-- generates ul structure -->
                <nav:primary class="nav navbar-inverse nav-stacked" />
            </div>
        </header>
        <section id="content" class="col-md-10">
            <div class="row"></div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <g:layoutTitle />
                </div>
                <div class="panel-body">
                    <g:layoutBody />
                </div>
            </div>
        </section>
    </div>
</div>

---

这里有一个带有更改的，您需要在nav中使用

.navbar collapse

类，因为该类设置为在给定断点处折叠

我对您的标记做了一些更改以适应这种情况，并添加了一个

.navbar

容器，以便您可以轻松使用按钮上的

.navbar toggle

类：

<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-brand"> 
            <a href="#">BABSI</a>
        </div>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar .navbar-collapse"> 
            <span class="icon-bar"></span>  
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="row">
        <header id="sidebar" class="col-md-2">
            <div class="collapse navbar-collapse">
                <!-- generates ul structure -->
                <nav:primary class="nav navbar-inverse nav-stacked" />
            </div>
        </header>
        <section id="content" class="col-md-10">
            <div class="row"></div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <g:layoutTitle />
                </div>
                <div class="panel-body">
                    <g:layoutBody />
                </div>
            </div>
        </section>
    </div>
</div>

这里有一个带有更改的

试试这个

<script>
    $('.navbar-collapse a').click(function(){
        $(".navbar-collapse").collapse('hide');
    });
</script>

$（'.navbar折叠a'）。单击（函数（）{
$（“.navbar collapse”）.collapse（'hide'）；
});

试试这个

<script>
    $('.navbar-collapse a').click(function(){
        $(".navbar-collapse").collapse('hide');
    });
</script>

$（'.navbar折叠a'）。单击（函数（）{
$（“.navbar collapse”）.collapse（'hide'）；
});

不起作用，首先它应用了一些我不想要的css样式（我可以处理），但也破坏了整个折叠。列表元素折叠（从下到上滑动），并立即恢复到动画之前的状态…不起作用，首先它应用了一些我不想要的css样式（我可以处理），但也破坏了整个折叠。列表元素将折叠（从下到上滑动），并立即恢复到动画之前的状态。。。