javascript - SlideToggle 删除其他事件类

Question

我有一个简单的菜单/ Accordion slider 。我想将 class="active"添加到单击的链接并向下滑动以显示 UL。当单击另一个单独的菜单项时，应将事件类从前一个元素中删除并添加到刚刚单击的元素中。此外，如果在事件模式下单击相同的按钮，则 slider 应向上滑动并删除事件类。

我尝试了以下各种配置，但每次单击事件类向上滑动时，都会遇到删除事件类的问题。如有任何帮助，我们将不胜感激。

$(document).ready(function(menuSlide) {
    $('li.menu-item-has-children a').click(function () {        
        if ($('li.menu-item-has-children a').hasClass('active')) {
            $('li.menu-item-has-children a').removeClass('active');
        }
        else {
            $(this).addClass('active');
        }

        $(this).next('ul').slideToggle();
        $(this).parent().siblings().children().next().slideUp();

        return false;
    });
});

更新 - 已创建快速JSFiddle这说明了问题所在，很抱歉没有回答开放问题。您可以看到，如果单击同一项目来切换状态仍保持事件状态。

Answer 1

由于您想支持切换，因此不应从当前元素中删除事件类

$(document).ready(function(menuSlide) {
  var $as = $('li.menu-item-has-children a').click(function() {
    $(this).toggleClass('active').next('ul').slideToggle();
    $(this).parent().siblings().children('ul').slideUp();
    $(this).parent().siblings().children('.active').removeClass('active');
    return false;
  });
});

.menu-item-has-children ul {
  display: none;
}
a.active {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="menu-item-has-children">
    <a>1</a>
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </li>
  <li class="menu-item-has-children">
    <a>1</a>
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </li>
  <li class="menu-item-has-children">
    <a>1</a>
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </li>
</ul>