Question

我有一个简单的菜单/手风琴滑块。我想将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;
    });
});

更新 - 创建了一个快速来证明这个问题，并对未提出问题表示歉意。您可以看到，如果单击相同的项目以切换状态仍然有效。

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>

Answer 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;
    }

});

Answer 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>

Answer 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;
    });
});

slideToggle删除其他活动类

4 个答案: