Как скрыть несколько селекторов как один раз с помощью jQuery

Question

Как это получается ..

    $("div.toggle1").hide();
    $("div.toggle3").hide();
            $("div.toggle4").hide();
            $("div.toggle5").hide();

не эквивалентно этому ...

           $('#container div').not('.toggle2').hide();

, которое происходит при событии щелчка, но оно не работает так же, как при ручном вводе нескольких тегов hide (). Я просто пытаюсь уменьшить использование тега hide () для каждого div, который я продолжаю добавлять в родительский div #container.

Answer 1

$("div.toggle1, div.toggle3, div.toggle4, div.toggle5").hide();

Или просто укажите каждому элементу DOM, что вы будете скрывать один и тот же класс, и вы можете просто сделать:

$('.hideClass').hide();

Answer 2

Вы можете легко управлять им через css. Добавьте скрытый класс в родительский контейнер, который будет иметь стиль display:none. Если вы не хотите display:none для div с классом toggle2, тогда переопределите стиль для этого элемента. Таким образом, вам не нужно вызывать hide для всех контейнеров или выбирать все контейнеры и вызывать метод hide.

Попробуйте это

.hidden{
   display:none;
}

.hidden .toggle2{
   display:block;
}

//This will add hidden class to the container which will 
//ultimately hide all the inner divs except div with class toggle2
$('#container').addClass('hidden');