из двух кнопок сделать одну
Здравствуйте!
Подскажите пожалуйста, как сделать так, чтоб за открытие и за закрытие отвечала одна кнопка? Например: Один раз нажал, галерея открылась. Второй раз нажал, закрылась. http://codepen.io/tjbenton21/pen/LEpqmg Заранее благодарен! |
cubano,
может хоть немного подучится, чтоб не спрашивать элементарные вещи и не плодите однотипные темы classlist
for(var i = 0; i < buttons.length; i++){
buttons[i].addEventListener("click", function(e){
for(var c = 0; c < containers.length; c++){
containers[c].classList.toggle("u-fancy-load--out")
containers[c].classList.toggle("u-fancy-load--in")
}
}, false);
}
|
:) вангую следующий вопрос ...
ответ тут коллекции-не-массивы |
Огромное спасибо ! все получилось.
Извиняюсь за свои примитивные вопросы! |
Попутно запомни ключевое слово - toggle. Такие штучки, кнопки-одиночки, переключалки логики чек-боксов*, с двумя состояниями называются toggle - это такая button, но застегивающаяся не через петельку, а через дырку в ткани (люверс). Тынц-тынц, застегнуто-расстегнуто, закрыто-открыто, и тп.
* В JQuery UI небось полно тоглей для оформления чекбоксов. |
Теоретически может быть третье состояние, ундефайнед, но на вебе оно не применяется.
|
Наберусь наглости, и задам еще один вопрос.
Как сделать, чтобы галерея закрывалась по нажатию на область, за ее пределами? Заранее благодарен! |
cubano,
галерея 1 или несколько? |
cubano,
document.addEventListener("click", function(e) {
var target = e.target, items = document.querySelectorAll(".u-fancy-load--in");
if(!items.length) return;
while (target != document) {
if (target.classList.contains("u-fancy-load") || target.hasAttribute("data-animation")) {
return;
}
target = target.parentNode;
}
[].forEach.call(items, function(el) {
el.classList.add("u-fancy-load--out")
el.classList.remove("u-fancy-load--in")
});
})
|
Здесь эротичнее сделать генеральную закрывашку на заранее ей известный идентификатор. Добавляешь этот класс к элементу и можно так открыть их много с защищенных от всплытия кнопок всяких, а потом щелк мимо и чпок все закрылись.
|
Цитата:
|
Значит я слоупок.
|
Доволен как слон !
Большое СПАСИБО за помощь ! |
| Часовой пояс GMT +3, время: 00:40. |