Mam listę

<ul class="products">
   <li class="products">first</li>
   <li class="products">second</li>
   <li class="products">third</li>
   <li class="products">fourth</li>
</ul>

I chcę użyć jQuery do:
1 - Ukryj inne LI S, gdy użytkownik kliknie jeden z wyjątkiem klikniętego.
2-Pokaż wszystkie LI S, gdy użytkownik kliknie ponownie na aktywnym li.

To jest skrypt:

$(window).load(function(){
$(".products li.active").click(function(){
    $(".products li").show("slow");
    $(this).removeClass("active");
});
$(".products li").click(function(){
    $(this).addClass("active");
    $(".products li:not(.active)").hide("slow");
});
});  

Działa dla pierwszego kroku, ale gdy użytkownik kliknie na aktywnych liter nic się nie zmienia.

2
Pmpr 7 wrzesień 2012, 15:04

4 odpowiedzi

Najlepsza odpowiedź

Spróbuj tego:

$(window).load(function(){
   $(".products li").click(function(){
      if ($(this).hasClass("active")) {
          //this is already active, show all
          $(".products li").show("slow");
          $(this).removeClass("active");
      } else {
          //this is not active yet, make active and hide all others
          $(this).addClass("active");
          $(".products li:not(.active)").hide("slow");
      }
   });
}); 

Demo na żywo dostępne tutaj na JSFiddle

2
Harsh Baid 7 wrzesień 2012, 11:18

Selektory te są oceniane w momencie wiązania zdarzenia - więc wydarzenie pierwsze click nie będzie zobowiązane do niczego. Zamiast tego użyj pojedynczej funkcji i sprawdź klasę wewnątrz tej funkcji:

$(document).ready(function() {
    $(".products li").click(function() {
        if($(this)).hasClass('active') {
            $(".products li").show("slow");
            $(this).removeClass("active");
        } else {
            $(this).addClass("active");
            $(".products li:not(.active)").hide("slow");
        }
    });
});

Och, a użyj zdarzenia Domready ($(document).ready()) zamiast wydarzeń okiennych ...

1
ThiefMaster 7 wrzesień 2012, 11:06

Nie musisz mieć 2 kliknięć wydarzeń:

$(document).load(function(){
    $(".products li").click(function(){
        if($(this).hasClass("active"){
           $(".products li").show("slow");
           $(this).removeClass("active");
        }
        else{
           $(this).addClass("active");
           $(".products li:not(.active)").hide("slow");
        }
    });
});
0
mgraph 7 wrzesień 2012, 11:06

Możesz to zrobić w ten sposób

$(".products li.active").live("click",function(){
    $(".products li").show("slow");
    $(this).removeClass("active");
});

$(".products li:not('.active')").live("click",function(){
    $(this).addClass("active");
    $(".products li:not(.active)").hide("slow");
});

JS Fiddle Kąt

0
rahul 7 wrzesień 2012, 11:12