Bootstrap堆叠导航只能一次打开一个

Question

我有一个堆叠的bootstrap导航菜单，我希望它像手风琴一样操作。如果用户点击其中一个导航容器，我希望其他人关闭......并且在我的生命中，经过多次尝试......我似乎无法弄清楚该怎么做......

 <ul class="nav nav-stacked home-menu-one" id="stacked-menu">
  <li>
      <a class="nav-container" data-toggle="collapse" data-parent="#stacked-menu" href="#p2">Shop Styles<div class="caret-container"><span class="caret arrow"></span></div></a>    
      <ul class="nav nav-pills nav-stacked collapse" id="p1">
            <li><a href="http://www.example.com/items/style/braided">Braided Rugs</a></li>
            <li><a href="http://www.example.com/items/style/contemporary">Contemporary Rugs</a></li>
            <li><a href="http://www.example.com/items/style/country-floral">Country &amp; Floral</a></li>
            <li><a href="http://www.example.com/items/style/european">European Rugs</a></li>
            <li><a href="http://www.example.com/items/style/botanical">Floral Rugs</a></li>
            <li><a href="http://www.example.com/items/style/southwestern">Geometric</a></li>
            <li><a href="http://www.example.com/items/search?ky=bCLo8xon6nv1zonqFzee2yahfIC2ogeJtMf8MUvqKZY">Jute Rugs</a></li>
            <li><a href="http://www.example.com/items/style/theme">Kids Rugs</a></li>
            <li><a href="http://www.example.com/items/search?ky=DiXwkLd_Kxj7oLcmO6VeSegDhqGLIEu6yb0FDhHq0-I">Outdoor Rugs</a></li>
            <li><a href="http://www.example.com/items/style/shag">Shag</a></li>
            <li><a href="http://www.example.com/items/style/solid-tone-on-tone">Tone On Tone</a></li>
            <li><a href="http://www.example.com/items/style/traditional">Traditional Rugs</a></li>
            <li><a href="http://www.example.com/items/style/transitional">Transitional Rugs</a></li>
          </ul>
    </li>
      <li>
      <a class="nav-container" data-toggle="collapse" data-parent="#stacked-menu" href="#p1">Shop Colors<div class="caret-container"><span class="caret arrow"></span></div></a>          
      <ul class="nav nav-pills nav-stacked collapse" id="p2">
        <li><a href="http://www.example.com/items/color/beige">Beige</a></li>
        <li><a href="http://www.example.com/items/color/black-grey">Black &amp; Grey</a></li>
        <li><a href="http://www.example.com/items/color/blue">Blues</a></li>
        <li><a href="http://www.example.com/items/color/brown-tan">Brown &amp; Tan</a></li>
        <li><a href="http://www.example.com/items/color/gold-yellow">Gold &amp; Yellow</a></li>
        <li><a href="http://www.example.com/items/color/graysilver">Gray &amp; Silver</a></li>
        <li><a href="http://www.example.com/items/color/green">Green</a></li>
        <li><a href="http://www.example.com/items/color/ivory-white">Ivory &amp; White</a></li>
        <li><a href="http://www.example.com/items/color/multicolor">Multicolor</a></li>
        <li><a href="http://www.example.com/items/color/orange-rust">Orange &amp; Rust</a></li>
        <li><a href="http://www.example.com/items/color/purple-pink">Purple &amp; Pink</a></li>
        <li><a href="http://www.example.com/items/color/red-burgundy">Red &amp; Burgundy</a></li>
      </ul>
    </li>
    ...
    </ul>

任何人都可以提供一些javacript来使这项工作按预期进行吗？在此先感谢您的帮助！

Answer 1

＆＃13;

＆＃13;

$('.nav > li > a').click( function(e) {
  e.preventDefault();
  $(this).next().slideUp().parent().siblings().find('ul').slideDown();
  return false;
});

＆＃13;

.nav > .active > ul {
  display: block;
}
.nav > li > ul {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-stacked home-menu-one" id="stacked-menu">
  <li class="active">
      <a class="nav-container" data-toggle="collapse" data-parent="#stacked-menu" href="#p2">Shop Styles<div class="caret-container"><span class="caret arrow"></span></div></a>    
      <ul class="nav nav-pills nav-stacked collapse" id="p1">
            <li><a href="http://www.example.com/items/style/braided">Braided Rugs</a></li>
            <li><a href="http://www.example.com/items/style/contemporary">Contemporary Rugs</a></li>
            <li><a href="http://www.example.com/items/style/country-floral">Country &amp; Floral</a></li>
            <li><a href="http://www.example.com/items/style/european">European Rugs</a></li>
            <li><a href="http://www.example.com/items/style/botanical">Floral Rugs</a></li>
            <li><a href="http://www.example.com/items/style/southwestern">Geometric</a></li>
            <li><a href="http://www.example.com/items/search?ky=bCLo8xon6nv1zonqFzee2yahfIC2ogeJtMf8MUvqKZY">Jute Rugs</a></li>
            <li><a href="http://www.example.com/items/style/theme">Kids Rugs</a></li>
            <li><a href="http://www.example.com/items/search?ky=DiXwkLd_Kxj7oLcmO6VeSegDhqGLIEu6yb0FDhHq0-I">Outdoor Rugs</a></li>
            <li><a href="http://www.example.com/items/style/shag">Shag</a></li>
            <li><a href="http://www.example.com/items/style/solid-tone-on-tone">Tone On Tone</a></li>
            <li><a href="http://www.example.com/items/style/traditional">Traditional Rugs</a></li>
            <li><a href="http://www.example.com/items/style/transitional">Transitional Rugs</a></li>
          </ul>
    </li>
      <li>
      <a class="nav-container" data-toggle="collapse" data-parent="#stacked-menu" href="#p1">Shop Colors<div class="caret-container"><span class="caret arrow"></span></div></a>          
      <ul class="nav nav-pills nav-stacked collapse" id="p2">
        <li><a href="http://www.example.com/items/color/beige">Beige</a></li>
        <li><a href="http://www.example.com/items/color/black-grey">Black &amp; Grey</a></li>
        <li><a href="http://www.example.com/items/color/blue">Blues</a></li>
        <li><a href="http://www.example.com/items/color/brown-tan">Brown &amp; Tan</a></li>
        <li><a href="http://www.example.com/items/color/gold-yellow">Gold &amp; Yellow</a></li>
        <li><a href="http://www.example.com/items/color/graysilver">Gray &amp; Silver</a></li>
        <li><a href="http://www.example.com/items/color/green">Green</a></li>
        <li><a href="http://www.example.com/items/color/ivory-white">Ivory &amp; White</a></li>
        <li><a href="http://www.example.com/items/color/multicolor">Multicolor</a></li>
        <li><a href="http://www.example.com/items/color/orange-rust">Orange &amp; Rust</a></li>
        <li><a href="http://www.example.com/items/color/purple-pink">Purple &amp; Pink</a></li>
        <li><a href="http://www.example.com/items/color/red-burgundy">Red &amp; Burgundy</a></li>
      </ul>
    </li>
    ...
    </ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

$('.nav > li > a').click( function(e) {
  $(this).next().show().parent().siblings().find('ul').hide();
  //or $(this).parent().addClass('active').siblings().removeClass('active');
});

＆＃13;

＆＃13;

＆＃13;