Есть ли jquery-плагин для отображения/скрытия divs в зависимости от их класса (категории) при нажатии

Question

Я работаю с сеткой из маленьких div, которые имеют один из четырех классов, и я хотел бы, чтобы вы могли угасать классы в и из используя событие onclick. Например, если 10 разделов и три относятся к категории «class1»; при щелчке по ссылке в меню все, НО разделители класса 1 исчезают до полностью скрытых или едва заметных. Аналогично, другие ссылки будут вызывать одинаковый эффект для «class2» или «class3» и т. Д. Также должен быть способ вернуть их обратно. Если у кого-то есть идея, что-то там, что делает это, я бы по достоинству оценил толчок в этом направлении.

Answer 1

$(".class1").fadeOut(); 

См. the jQuery documentation для получения более подробной информации. С помощью fadeIn() вы можете вернуть их обратно.

Answer 2

JQuery уже делает это:

$(".class1").fadeOut("slow"); 
$(".class1").fadeIn("slow"); 

Answer 3

Очень легко сделать с toggle:

$(document).ready(function() { 
    $('#IDOfLink').click(function() { 
     $('.class1').toggle("slow");//switch to show/hide when clicked 
    }); 

    $('#anotherLinkID').click(function() { 
     $('.class2').toggle("fast");//switch to show/hide when clicked 
    }); 
    //...etc... 
}); 

Разметка будет выглядеть следующим образом:

<a id="IDofLink">Click here to toggle divs with the class of class1</a> 

<div class="class1">Blah blah</div> 
<div class="class1">Another class1 div</div> 

Answer 4

Это самое сердце JQuery! Вы хотите что-то вроде этого:

$("#link-that-will-be-clicked").click(function() { 
    $(".class2,.class3,.class4").fadeOut(); 
}); 

Для того, чтобы чистящее решение, я рекомендую давать всеdiv S общий класс, как common-class в дополнение к class1. Таким образом, вы могли бы:

<div class="common-class class1"></div> 

Это позволит вам написать что-нибудь столь же простое, как:

$("#link-that-will-be-clicked").click(function() { 
    $(".common-class:not(.class1)").fadeOut(); 
}); 

И восстановить все:

$(".common-class").fadeIn();