Question

我正在构建jquery垂直菜单导航，有一些指向<li> <a>标签页面的链接，我想要的是每当点击一个链接然后在页面加载时子菜单处于活动状态并且他的父菜单被折叠和其他人关闭。

<ul id="nav">
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="index.html">Sub-Item 1 a</a></li>
      <li><a href="#">Sub-Item 1 b</a></li>
      <li><a href="#">Sub-Item 1 c</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="index2.html">Sub-Item 2 a</a></li>
      <li><a href="#">Sub-Item 2 b</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Sub-Item 3 a</a></li>
      <li><a href="#">Sub-Item 3 b</a></li>
      <li><a href="#">Sub-Item 3 c</a></li>
      <li><a href="#">Sub-Item 3 d</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a>
    <ul>
      <li><a href="#">Sub-Item 4 a</a></li>
      <li><a href="#">Sub-Item 4 b</a></li>
      <li><a href="#">Sub-Item 4 c</a></li>
    </ul>
  </li>
</ul>

和

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></scrip>
    $(document).ready(function () {
      $('#nav > li > a').click(function(){
        if ($(this).attr('class') != 'active'){
          $('#nav li ul').slideUp();
          $(this).next().slideToggle();
          $('#nav li a').removeClass('active');
          $(this).addClass('active');
        }
      });
    });

和css的东西，

#nav {
    float: left;
    width: 280px;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    border-left: 1px solid #999;
}
#nav li a {
    display: block;
    padding: 10px 15px;
    background: #ccc;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #999;
    text-decoration: none;
    color: #000;
}
#nav li a:hover, #nav li a.active {
    background: #999;
    color: #fff;
}
#nav li ul {
    display: none; // used to hide sub-menus
}
#nav li ul li a {
    padding: 10px 25px;
    background: #ececec;
    border-bottom: 1px dotted #ccc;
}

我希望当用户点击子项目2而不是该页面时，加载项目2菜单已折叠打开而其他菜单已关闭。我已经写了上面的代码，但没有像我期待的那样工作......

这是Jssfiddle

在访问该链接时使引导程序垂直导航可折叠

0 个答案: