Как улучшить данный код? (не могу разобраться)
Подскажите, как исправить данный код, чтобы на разрешении меньше 960px по клику на BTN срабатывал event и показывался BLOCK, а при повторном клике на BTN срабатывал снова event на Display:NONE.
Долго ковырялся в данном коде, но ничего путного не вышло. Работает только display:block, а обратно по клику block не закрывается (display:none). Прошу вашей помощи.
(function(){
var btn = document.querySelector(".gruppi-toggle");
var block = document.querySelector(".speciali-gruppi-window");
if (window.screen.width < 960){
btn.addEventListener("click", function(){block.style.display = "block";});
btn.addEventListener("click", function(){block.style.display = "none";});
}
})();
P.S. код немного уменьшил, т.к. у меня есть второй if, на разрешение больше 960 и click\mouseLeave - там все ок. |
(function(){
var btn = document.querySelector(".gruppi-toggle");
var block = document.querySelector(".speciali-gruppi-window");
if (window.screen.width < 960){
btn.addEventListener("click", function(){
document.clicked = !document.clicked >>> 0;
if(document.clicked) {
block.style.display = "block";
}}
else{
block.style.display = "none";;
})();
|
<button class="gruppi-toggle">
Click
</button>
<div class="speciali-gruppi-window" style="display: block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ratione, pariatur obcaecati veritatis eum sit. Expedita quas suscipit esse aspernatur sint veritatis eius, dolores, architecto voluptate tempore illo itaque, eligendi.</div>
<script>
(function(){
var btn = document.querySelector(".gruppi-toggle");
var block = document.querySelector(".speciali-gruppi-window");
if (window.screen.width < 960){
btn.addEventListener("click", function() {
if (block.style.display == "block") {
block.style.display = "none";
}
else {
block.style.display = "block";
}
});
}
})();
</script>
|
.gruppi-toggle.hidden {
display: none;
}
(function(){
var btn = document.querySelector('.gruppi-toggle');
block = document.querySelector('.speciali-gruppi-window');
if(window.screen.width < 960) {
btn.onclick = block.classList.toggle.bind(block, 'hidden');
}
})();
|
Спасибо всем отписавшимся, Ruslan_xDD только сейчас увидел ваш вариант.
Воспользовался вышестоящим. Код получился следующим: как считаете можно улучшить? Чтобы не обращаться к каждому элементу по ключу и плодить код?
(function(){
var btn = document.querySelectorAll(".gruppi-toggle"), block = document.querySelectorAll(".speciali-gruppi-window");
if (window.screen.width < 960){
btn[0].addEventListener("click", function(){
if (block[0].style.display == "none") {
block[0].style.display = "block";
}else {
block[0].style.display = "none";
}
});
btn[1].addEventListener("click", function(){
if (block[1].style.display == "none") {
block[1].style.display = "block";
}else {
block[1].style.display = "none";
}
});
}if (window.screen.width > 960){
btn[0].addEventListener("click", function(){block[0].style.display = "block";});
block[0].addEventListener("mouseleave", function(){block[0].style.display = "none";});
btn[1].addEventListener("click", function(){block[1].style.display = "block";});
block[1].addEventListener("mouseleave", function(){block[1].style.display = "none";});
}
})();
|
.gruppi-toggle.hidden {
display: none;
}
(function(){
function handler(event, method, current, target) {
current['on' + event] = current.classList[method].bind(target || current, 'hidden');
};
var btn = document.querySelectorAll('.gruppi-toggle'),
block = document.querySelectorAll('.speciali-gruppi-window'),
screenIsMin = window.screen.width < 960,
i, method = screenIsMin ? 'toggle' : 'remove';
for(i = 0; i < btn.length; i++) {
handler('click', method, btn[i], block[i]);
if(!screenIsMin) {
handler('mouseleave', 'add', block[i]);
}
}
})();
|
Цитата:
|
| Часовой пояс GMT +3, время: 22:43. |