javascript - 带折叠 BootStrap 的菜单

Question

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

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

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

这是代码，当你尝试它时你会明白我的意思:

<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 文件中。

尝试一下，如果它接近您想要的，请告诉我。