javascript - 带有折叠 BootStrap 的菜单

Question

您好，我在 BootStrap 中有一个按钮。我在菜单中使用“折叠”，当我按下它以折叠它时，每个按钮都会出现任何问题。

但是当我按下另一个按钮时，这个活动会出现在另一个按钮上。

如何改变这个动作？当我按下任何按钮时，它会隐藏它，但使用与折叠相同的动画来完成它。

这是代码，当您尝试时，您会明白我的意思：

<ul class="nav nav-pills">
   <li class="dropdown"><a href="#" data-toggle="collapse" data-target="#content0a">1<strong class="caret"></strong></a></li>
   <li class="dropdown"><a href="#" data-toggle="collapse" data-target="#content1a">2<strong class="caret"></strong></a></li>
</ul>
<div class="clearfix"><p>content more</p></div>
<div id="content0a" class="collapse">
<div class="navbar">
    <div class="thumbnail bs-example bullet0a">
        <div class="media">
            <div class="">
                <ul><li> Content...1 </li></ul>
            </div>
        </div>
    </div>
</div>
</div>
<div id="content1a" class="collapse">
<div class="navbar">
    <div class="thumbnail bs-example bullet0a">
        <div class="media">
            <div class="">
                <ul><li> Content...2 </li></ul>
            </div>
        </div>
    </div>
</div>
</div>

Answer 1

尝试这个。

   <script>
       $(document).ready(function(){
           $('.nav-pills a').click(function(){
               $('.in').not($(this).data('target')).height(0);
               $('.in').not($(this).data('target')).removeClass('in');
           });
       });
   </script>

你也可以试试这个。（这提供了更多的折叠动画）

<script>
    $(document).ready(function(){
        $('.nav-pills a').click(function(){
            $('.in').not($(this).data('target')).collapse('hide');
        });
    });
</script>

您可以将其添加到页面底部的</body>标签之前，也可以将其添加到现有的 javascript 文件中。

试试看，让我知道它是否接近你想要的。