CODEWITHSUNDEEP
javascriptjqueryslidetoggle
Maykel Esser
Maykel Esser

Reputation: 319

How to change/remove class when close SlideToggle

I want to remove the ativo class from liToggle when close my SlideToggle. I've tried to use is(":hidden") and the ELSE statement, but doesn't work.

How can i do this?

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

I have a codepen here too... can be useful: http://codepen.io/maykelesser/pen/RKdgvY

Upvotes: 1

Views: 679

Answers (3)

Vas Hanea
Vas Hanea

Reputation: 120

Or create a general class for all ul that they are collapsible/expandable and when click on a link, close all ul with that class except the clicked one:

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>

and 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

Upvotes: 0

Parvez Rahaman
Parvez Rahaman

Reputation: 4397

When you toggle the ul you need to use a callback. Because when you making slide toggle it take some time. See the Pen.

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

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

Upvotes: 1

haim770
haim770

Reputation: 49133

You'll have to wait till slideToggle() animation actually completes to determine whether it's :visible or not.

You can pass a callback:

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;

Or use a Promise:

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

Also, you can avoid the entire if clause using:

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

Upvotes: 1

Related Questions