jQuery简单垂直手风琴菜单

当我单击“项目”时，它将打开，当再次单击时，它将关闭，我该怎么办 在垂直手风琴菜单中：

<style>
    #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; }
    </style>  

    <ul id="nav">
      <li><a href="#">Item 1</a>
        <ul>
          <li><a href="#">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="#">Sub-Item 2 a</a></li>
          <li><a href="#">Sub-Item 2 b</a></li>
        </ul>
      </li>
    </ul>


<script type="text/javascript">
$(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');
    }
  });
});
</script> 

#导航{float:left；width:280px；边框顶部：1px solid#999；边框右侧：1px solid#999；边框左侧：1px solid#999；}nav li a{display:block；padding:10px 15px；背景：#ccc；边框顶部：1px solid#eee；边框底部：1px solid#999；文本装饰：无；颜色：#000；#nav li a:hover#active nav}{背景：#999；颜色：#fff；}#导航李ul{显示：无；//用于隐藏子菜单}#导航李ul李a{填充：10px 25px；背景：#ecececec；边框底部：1px虚线#ccc；}















$（文档）.ready（函数（）{
$（'#nav>li>a'）。单击（函数（）{
if（$（this.attr（'class'）！='active'）{
$（'#nav li ul'）.slideUp（）；
$（this.next（）.slideToggle（）；
$（'#nav li a'）.removeClass（'active'）；
$（this.addClass（'active'）；
}
});
});

---

当我单击项目1、项目2时，它将打开子菜单，但如果我再次单击它，它不会关闭它。

如果该项目已处于活动状态，您需要jquery中的

或
来捕捉单击


$（文档）.ready（函数（）{
$（'#nav>li>a'）。单击（函数（）{
if（$（this.attr（'class'）！='active'）{
$（'#nav li ul'）.slideUp（）；
$（this.next（）.slideToggle（）；
$（'#nav li a'）.removeClass（'active'）；
$（this.addClass（'active'）；
}否则{
$（'#nav li ul'）.slideUp（）；
$（'#nav li a'）.removeClass（'active'）；
}
});
})；
#nav li ul{
显示：无；
}















不起作用，因为它没有在已激活
类的链接上运行任何代码

你可以用更少的代码实现你想要的

$('#nav > li > a').click(function(){
    $('#nav > li > a').not(this).removeClass('active').next().slideUp();
    $(this).toggleClass('active').next().slideToggle();
});

你想达到的目标是什么？