jquery - Jquery：手风琴菜单 slideDown 和 slideUp

Question

我有这个代码：

<ul class="main">
    <li><a href="#">main menu1<span class="open"> </span></a>
            <ul class="submenu">
                <li><a href="#">submenu1</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu3</a></li>
                <li><a href="#">submenu4</a></li>
                <li><a href="#">submenu5</a></li>
            </ul>
       </li>
    <li><a href="#">main menu2<span class="open">  </span></a>
            <ul class="submenu">
                <li><a href="#">submenu1</a></li>
                <li><a href="#">submenu2</a></li>
                <li><a href="#">submenu3</a></li>
                <li><a href="#">submenu4</a></li>
                <li><a href="#">submenu5</a></li>
            </ul>
      </li>
</ul>

和这个用于手风琴菜单的 jquery

     var submenu = $('.submenu').hide();

  $('.open').click(function() {
      $this = $(this);
      $target =  $this.parent().next();

      if(!$this.hasClass('close')){
         $('.open').removeClass('close');
         submenu.slideUp();
         $this.addClass('close');
         $target.slideDown();
      }
  });

它的工作原理是这样的，点击右边的按钮，它submenu是向下滑动的，其他的都是向上滑动的。

我想要当我点击它本身时（我的意思是右侧的按钮，当前打开的子菜单），它submenu也向上滑​​动。

我该怎么做？

这是jsFiddle中的代码

Answer 1

很简单，使用一个else条件，简单的使用$target.slideUp();

if(!$this.hasClass('close')){
     $('.open').removeClass('close');
     submenu.slideUp();
     $this.addClass('close');
     $target.slideDown();
}else{
     $target.slideUp();
     $this.removeClass('close');
}

这是你的小提琴