Как сделать блок неактивным при нажатии на кнопку

281
05 декабря 2017, 19:56

Привет всем, возник вопрос, можно ли сделать на jquery функцию такого рода, которая при клике на нужный блок делает его активным, а все остальные другие неактивными. И при повторном нажатии на активный блок также убрать его активность. С первой частью я разобрался, сделал функцию такого рода

$(".block").click(function(){
$(".block").each(function(){ $(".block").removeClass("active"); });
$(this).addClass("active");
});

Как сделать так,чтобы при нажатии на активный блок он делался неактивным? Я пробовал сделать кнопку, при нажатии на которую убирается класс "active", но может это реально сделать в пределах одной функции,не используя сторонних кнопок, дабы код был более лаконичный

Answer 1

Если активность блока у вас маркируется наличием класса active, тогда используйте примитивы:

  • сделать активным $().addClass("active")
  • сделать не активным $().removeClass("active")
  • переключить активность $().toggleClass("active")

В целом, мне кажется, что можно просто по клику переключать класс активности:

$(".block").click(function(){
    // На нажатом элементе .block переключаем состояние активности
    $(this).toggleClass("active");
    // Для всех элементов .block, кроме того, на который нажали, уберем активность
    $(".block").not(this).removeClass("active");
});

Не знаю, насколько это изящно, смотрите сами

READ ALSO
Отличие row от column

Отличие row от column

Верстаю таблицу div-ами, возник вопрос, в чем морфологическое отличие column от row?

212
Можно ли весь сайт делать на svg?

Можно ли весь сайт делать на svg?

Что если html-верстку сайта сделать только с svg изображениями, вместо стандартных img или png, не будет никаких проблем? Кроссбраузерность и прочее?

282
Не отображается изображение в JSP

Не отображается изображение в JSP

В Java давно, а в Java EE совсем недавноРазбираюсь в азах, так сказать

264
Overflow scroll в блоке с positin absolute

Overflow scroll в блоке с positin absolute

Есть абсолютно спозиционированная менюшкаМенюшка имеет определенные размеры => если много текста, то должен появиться у нее скрол, но если...

391