Question

我想在关闭我的SlideToggle时从 liToggle 中删除 ativo 类。我尝试使用is（＆＃34;：hidden＆＃34;）和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;
    }
});

我这里也有一个codepen ...很有用：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");
    }
});

＆＃13;

$(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;
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

或者为所有ActivityOfMyChoice创建一个可折叠/可展开的通用类，当点击链接时，关闭所有ul除了点击的类之外的其他ul：

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时如何更改/删除类

3 个答案: