jquery - Bootstrap 堆叠导航一次只打开一个问题

Question

我有一个堆叠式 Bootstrap 导航菜单，我希望它像 Accordion 一样运行。如果用户单击其中一个导航容器，我希望它们的其余部分关闭......并且在我的一生中，经过多次尝试......我似乎无法弄清楚在这里做什么...

 <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

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

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

<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>