31.03.2020, 16:19
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
korifey,
не могу помочь, не понимаю что вам нужно.
|
|
31.03.2020, 16:39
|
|
Интересующийся
|
|
Регистрация: 30.03.2020
Сообщений: 28
|
|
|
К примеру есть 2 кнопки.1-ая показывается при размере браузера >810 а 2-ая при <810 и они должны открывать один и тот же блок.Для этого я и сделал смену класса у того блока, но блок показывается и тут же исчезает.
|
|
31.03.2020, 17:09
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
korifey,
скрипт то дополнительный зачем?
|
|
31.03.2020, 17:15
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от korifey
|
|
К примеру есть 2 кнопки.1-ая показывается при размере браузера >810 а 2-ая при <810 и они должны открывать один и тот же блок.Для этого я и сделал смену класса у того блока, но блок показывается и тут же исчезает.
|
не понимаю, добавьте вторую кнопку в список rels и всё, зачем класс менять? |
|
31.03.2020, 17:32
|
|
Интересующийся
|
|
Регистрация: 30.03.2020
Сообщений: 28
|
|
Если у каждой кнопки свой блок
const rels=[['#b3','.isk'],['#b2','.mcat-all'],['#b1','.misk'],['#b4','.men1'],['#b5','.cat-all'],['#b6','.msor']];
то Ваш код работает, а если у двух кнопок 1 общий блок
const rels=[['#b3','.isk'],['#b1','.isk']];
не работает.Вот я и попробовал изменить класс. |
|
31.03.2020, 17:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
korifey,
что не работает?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#b1,#b4,#b5,#b6,#b3,#b2{width:50px;height:30px;background-color:brown;cursor:pointer;float:left;margin-right:5px;text-align:center;padding-top:10px}
.cat-all,.mcat-all,.misk,.men1,.msor,.isk{width:300px;height:100px;border:1px solid #000000;display:none;text-align:center;padding-top:50px}
div.open {
display: block;
}
#b1, #b3{
background-color: #008000;
}
</style>
</head>
<body>
<div id="b3"><div>b3</div></div>
<div id="b2">b2</div>
<div id="b1">b1</div>
<div id="b4"><span>b4</span></div>
<div id="b5">b5</div>
<div id="b6">b6</div>
<br><br><br>
<div id="mpois" class="isk">block button 1</div>
<div class="mcat-all">block button 2</div>
<div class="men1">block button 4</div>
<div class="cat-all">block button 5</div>
<div class="msor">block button 6</div>
<script>
let open;
const rels=[['#b3','.isk'],['#b1','.isk']];
addEventListener( 'click' , ({target}) => {
if(target.closest('.open')) return;
let item = rels.find(([selector, ..._]) => target.closest(selector));
if(item) {
item = document.querySelector(item[1]);
if(!item) return;
item.classList.toggle('open');
}
if(open && open != item) open.classList.remove('open');
open = item;
})
</script>
</body>
</html>
Последний раз редактировалось рони, 01.04.2020 в 20:02.
|
|
31.03.2020, 18:13
|
|
Интересующийся
|
|
Регистрация: 30.03.2020
Сообщений: 28
|
|
Ссори работает.
Еще вопросик.Есть <div class="h-n"></div> и надо что бы при любом открытом блоке он исчезал а при скрытом появлялся бы. |
|
31.03.2020, 18:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
korifey,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#b1,#b4,#b5,#b6,#b3,#b2{width:50px;height:30px;background-color:brown;cursor:pointer;float:left;margin-right:5px;text-align:center;padding-top:10px}
.cat-all,.mcat-all,.misk,.men1,.msor,.isk{width:300px;height:100px;border:1px solid #000000;display:none;text-align:center;padding-top:50px}
div.open {
display: block;
}
#b1, #b3{
background-color: #008000;
}
</style>
</head>
<body>
<div id="b3"><div>b3</div></div>
<div id="b2">b2</div>
<div id="b1">b1</div>
<div id="b4"><span>b4</span></div>
<div id="b5">b5</div>
<div id="b6">b6</div>
<br><br><br>
<div id="mpois" class="isk">block button 1</div>
<div class="mcat-all">block button 2</div>
<div class="men1">block button 4</div>
<div class="cat-all">block button 5</div>
<div class="msor">block button 6</div>
<div class="h-n">bla-bla</div>
<script>
let open;
const rels=[['#b3','.isk'],['#b1','.isk']];
addEventListener( 'click' , ({target}) => {
if(target.closest('.open')) return;
let item = rels.find(([selector, ..._]) => target.closest(selector));
if(item) {
item = document.querySelector(item[1]);
if(!item) return;
item.classList.toggle('open');
}
if(open && open != item) open.classList.remove('open');
open = item;
document.querySelector('.h-n').hidden = document.querySelector('.open');
})
</script>
</body>
</html>
Последний раз редактировалось рони, 01.04.2020 в 20:03.
|
|
31.03.2020, 21:02
|
|
Интересующийся
|
|
Регистрация: 30.03.2020
Сообщений: 28
|
|
|
Огромное спасибо!!!
|
|
01.04.2020, 16:39
|
|
Интересующийся
|
|
Регистрация: 30.03.2020
Сообщений: 28
|
|
А если пара кнопок находиться в открывшемся блоке.
<div id="b3"><div>b3</div></div>
<div id="b2">b2</div>
<div id="b1">b1</div>
<div id="b4"><span>b4</span></div>
<br><br><br>
<div id="mpois" class="isk">block button 1</div>
<div class="cat-all">block button 2</div>
<div class="men1">
<div id="b5">b5</div>
<div id="b6">b6</div>
</div>
<div class="cat-all">block button 5</div>
<div class="msor">block button 6</div>
<div class="h-n">bla-bla</div>
|
|
|
|
