slideToggle 删除其他活动类答案

【问题标题】：slideToggle remove other active classesslideToggle 删除其他活动类
【发布时间】：2015-07-28 19:31:02
【问题描述】：

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

我尝试了下面的各种配置，但每次都无法在单击以向上滑动活动类时删除活动类。任何帮助表示赞赏。

$(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 来演示这个问题，很抱歉没有在开放问题上做。您可以看到，如果单击相同的项目来切换状态，则仍然处于活动状态。

【问题讨论】：

我们还能看到相关的HTML吗？有助于了解正在使用的元素的结构。
从您的条件中删除else。如果您的锚标记在类中处于活动状态，则不会设置新类。基本上你是说：如果任何锚的类名处于活动状态，请将其删除。如果没有锚标签的类名处于活动状态，则设置一个。
如果你的 JavaScript 中有一些 HTML 会容易得多。也许您可以在 js-fiddle 中创建一个运行示例来说明您的问题？
Fiddle 更新了道歉。

标签： javascript jquery

【解决方案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>

【讨论】：

我认为 OP 的错误在于 else 条件。这是一个很好的解决方案，但没有解释手头问题的原因。
这对我来说非常有效，但我仍然想了解我在原始代码中哪里出错了。谢谢阿伦。
@d1ch0t0my $('li.menu-item-has-children a').hasClass('active') 将返回 true 如果任何 a 元素的类处于活动状态...因此假设您单击了第二个项目然后移动到第一个项目...现在 if语句将返回 true，因为第二项具有类.. 所以不是第一项不会获得活动类

【解决方案2】：

我们只需将前一个点击的 div 存储在一个变量中，然后在点击时向上滑动该 div：

var previousElement = 0;
$(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');
        previousElement = 0;
    }else {
        $(this).addClass('active');
        if(previousElement != 0) {
             $(previousElement).removeClass('active');
             $(previousElement).slideUp();
        }
        previousElement =  this;
    }

});

【讨论】：

【解决方案3】：

最简单的方法是，

    $(document).ready(function(){
      $('li.menu-item-has-children .content').slideUp();
       $(document).on('click','li.menu-item-has-children a',function(e){
         e.preventDefault();
         $this = $(this);
         $('li.menu-item-has-children a').removeClass('active');
         $this.addClass('active');
         $('li.menu-item-has-children a').parent().find('.content').slideUp();
         $this.parent().find('.content').slideDown();
       });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
	<ul>
		<li class="menu-item-has-children">
			<a href="#">A</a>
			<div class="content">
				AAAA AAAA AAAA
			</div>
		</li>
		<li class="menu-item-has-children">
			<a href="#">B</a>
			<div class="content">
				BBBB BBBB BBBB
			</div>
		</li>
		<li class="menu-item-has-children">
			<a href="#">C</a>
			<div class="content">
				CCCC CCCC CCCC
			</div>
		</li>
	</ul>
</html>

【讨论】：

【解决方案4】：

在下面的示例中，我已经点击了两次相同的链接，如果您需要这个东西，请告诉我，

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

        $(this).next('ul').slideDown();
        $(this).parent().siblings().children().next().slideUp();
        }
        return false;
    });
});

【讨论】：