关闭 SlideToggle 时如何 change/remove class

Question

我想在关闭 SlideToggle 时从 liToggle 中删除 ativo class。我试过使用 is(":hidden") 和 ELSE 语句，但不起作用。

我该怎么做？

$("aside #menu-busca ul > li a").click(function(){
    if($(this).attr('href') == "#"){

        var ulToggle = $(this).parent().children("ul");
        var liToggle = $(this).parent();
        ulToggle.slideToggle("slow");

        if (ulToggle.is(":visible")){
            $(liToggle).addClass("ativo");
        }
        // * Here?
        else {
            $(liToggle).removeClass("ativo");
        }

        return false;
    }
});

我这里也有一个代码笔...可能会有用：http://codepen.io/maykelesser/pen/RKdgvY

Answer 1

切换 ul 时需要使用回调。因为当你进行滑动切换时需要一些时间。请参阅 Pen。

ulToggle.slideToggle("slow", function(){
    if($(this).is(":visible")){
        $(liToggle).addClass("ativo");
    }
});

或使用jquery$.when

$.when(ulToggle.slideToggle("slow")).then(function(){
    if($(this).is(":visible")){
        $(liToggle).addClass("ativo");
    }
});

$(function() {
  $("aside #menu-busca ul > li a").click(function() {
    if ($(this).attr('href') == "#") {

      var ulToggle = $(this).parent().children("ul");
      var liToggle = $(this).parent();
      ulToggle.slideToggle("slow", function() {
        if (ulToggle.is(":visible")) {
          liToggle.addClass("ativo");
        }
      });
      return false;
    }
  });
});

#menu-busca ul li ul {
  display: none;
}

#menu-busca ul li.ativo {
  border: 1px solid red;
}

#menu-busca ul li.ativo ul {
  display: block;
}

.ativo {
  background-color: green;
}

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<aside>
  <div id="menu-busca">
    <ul>
      <li class="ativo"><a href="#">Categoria 01</a>
        <ul>
          <li>SubCat01-01</li>
          <li>SubCat01-02</li>
        </ul>
      </li>
      <li><a href="#">Categoria 02</a>
        <ul>
          <li>SubCat02-01</li>
          <li>SubCat02-02</li>
        </ul>
      </li>
    </ul>
  </div>
</aside>

Answer 2

您必须等到 slideToggle() 动画真正完成才能确定它是否 :visible。

你可以传递回调：

var ulToggle = $(this).parent().children("ul");
var liToggle = $(this).parent();

ulToggle.slideToggle("slow", function() {
    if (ulToggle.is(":visible")){
        $(liToggle).addClass("ativo");
    }
    else {
        $(liToggle).removeClass("ativo");
    }
});

return false;

或使用 Promise:

ulToggle.slideToggle("slow").promise().then(function() {
    if (ulToggle.is(":visible")){
        $(liToggle).addClass("ativo");
    }
    else {
        $(liToggle).removeClass("ativo");
    }
});

此外，您可以使用以下方法避免整个 if 子句：

$(liToggle).toggleClass("ativo", ulToggle.is(":visible"));

Answer 3

或者为所有 ul 创建一个通用 class，它们是 collapsible/expandable，当单击 link 时，关闭所有 ul class除了点击的那个：

HTML

<aside>
  <div id="menu-busca">
    <ul>
      <li class="ativo"><a href="#">Categoria 01</a>
        <ul class="all">
          <li>SubCat01-01</li>
          <li>SubCat01-02</li>
        </ul>
      </li>
      <li><a href="#">Categoria 02</a>
      <ul class="all">
          <li>SubCat02-01</li>
          <li>SubCat02-02</li>
        </ul>
      </li>
    </ul>
  </div>
</aside>

和 js

$(function() {  
  $("aside #menu-busca ul > li a").click(function(){
    if($(this).attr('href') == "#"){
$(".all").not(this).slideUp("slow");
        var ulToggle = $(this).parent().children("ul");
        var liToggle = $(this).parent();
        ulToggle.slideToggle("slow");

        // * Se estiver aberto
        if (ulToggle.is(":visible")){
            $(liToggle).addClass("ativo");
        }

        return false;
    }
  });
});

http://codepen.io/anon/pen/RKOKWV

关闭 SlideToggle 时如何 change/remove class

How to change/remove class when close SlideToggle

javascript

jquery

slidetoggle