Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Открыть, закрыть несколько блоков на javascript (https://javascript.ru/forum/misc/79828-otkryt-zakryt-neskolko-blokov-na-javascript.html)

korifey 30.03.2020 20:15
Открыть, закрыть несколько блоков на javascript
 
Помогите сделать открытие блоков при кликах по кнопкам и закрытии этих блоков при повторном клике по кнопке или в любом месте вне этого блока.
var rels=[['#b3','.isk'],['#b2','.cat-all'],['#b1','.isk'],['#b4','.men1'],['#b5','.cat-all'],['#b6','.msor']];

где 1-кнопки а 2-блоки к ним.

рони 30.03.2020 20:50
korifey,
Цитата:
Сообщение от рони
Открывашка 204 + закрытие по клику вне блока или кнопок чем не оно
https://javascript.ru/forum/dom-wind...tml#post385057

korifey 31.03.2020 10:53
На jquery мне не надо.Нужно на javascript без лишних библиотек.

рони 31.03.2020 11:05
korifey,
поищите по форуму на js "открывашка", либо сделайте минимальный макет html/css

korifey 31.03.2020 13:50
Попытался так
<!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}
    </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 class="isk">block button 1</div>
<div class="mcat-all">block button 2</div>
<div class="isk">block button 3</div>
<div class="men1">block button 4</div>
<div class="cat-all">block button 5</div>
<div class="msor">block button 6</div>
	<script>
var rels=[['#b3','.isk'],['#b2','.mcat-all'],['#b1','.misk'],['#b4','.men1'],['#b5','.cat-all'],['#b6','.msor']];
var timeVar='';
document.addEventListener('click', e => {
for(var i=0;i<rels.length;i++){
var kn = document.querySelector(rels[i][0]);
var block=document.querySelector(rels[i][1]);
if(kn.contains(e.target)){
if(block.style.display == "block")
			{
			 block.style = "display: none"; 
			}
			else
			{
			 block.style = "display: block"; timeVar = 1;
			}
}
if(e.target==block){
timeVar=1;
}
if(!block.contains(e.target) && block.style.display=='block') {if(!timeVar)
			{
			 block.style = "display: none"; 
			}
			if(timeVar) {timeVar='';}}
if(kn==e.target){break;}
}
}, false);
</script>
</body>
</html>

но работает коряво, особенно кнопки с одинаковыми блоками.

рони 31.03.2020 14:28
открывашка зависимая закрытие по клику вне элементов js
 
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;
    }

    </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 class="isk">block button 1</div>
<div class="mcat-all">block button 2</div>
<div class="misk">block button 3</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'],['#b2','.mcat-all'],['#b1','.misk'],['#b4','.men1'],['#b5','.cat-all'],['#b6','.msor']];
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>

рони 31.03.2020 14:47
korifey,
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
    .btn{width:50px;height:30px;background-color:brown;cursor:pointer;float:left;margin-right:5px;text-align:center;padding-top:10px}
    .show {width:300px;height:100px;border:1px solid #000000;display:none;text-align:center;padding-top:50px}
    .show.open {
        display: block;
    }

    </style>
</head>
<body>
<div class="btn">b1</div>
<div class="btn">b2</div>
<div class="btn">b3</div>
<div class="btn">b4</div>
<div class="btn">b5</div>
<div class="btn">b6</div>
<br><br><br>
<div class="show">block button 1</div>
<div class="show">block button 2</div>
<div class="show">block button 3</div>
<div class="show">block button 4</div>
<div class="show">block button 5</div>
<div class="show">block button 6</div>
    <script>
let open;
addEventListener( 'click' , ({target}) => {
if(target.closest('.open')) return;
let elem;
if(target = target.closest('.btn')) {
const btn = document.querySelectorAll('.btn');
const index = Array.prototype.findIndex.call(btn, el => el === target);
elem = document.querySelectorAll('.show')[index];
if(!elem) return;
elem.classList.toggle('open');
}
if(open && open != elem) open.classList.remove('open');
open = elem;
})
</script>
</body>
</html>

korifey 31.03.2020 15:43
А почему так не работает?
<!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;
    }

    </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>
var nfl=0;function gebID(id){return document.getElementById(id);}function gebTN(tagName,parentEl){if(typeof parentEl=="undefined")var parentEl=document;return parentEl.getElementsByTagName(tagName);}
function setStyleToTags(parentEl,tagName,styleString){var tags=gebTN(tagName,parentEl);for(var i=0;i<tags.length;i++)tags[i].setAttribute('style',styleString);}function testSizes(){if(window.innerWidth<=811){
document.getElementById('mpois').className='misk';
}

if(window.innerWidth>811){
document.getElementById('mpois').className='isk';
}
}setInterval(testSizes,200);
let open;
const rels=[['#b3','.isk'],['#b2','.mcat-all'],['#b1','.misk'],['#b4','.men1'],['#b5','.cat-all'],['#b6','.msor']];
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>

рони 31.03.2020 15:54
korifey,
что должен делать код?

korifey 31.03.2020 16:03
При сужении браузера меняется класс у блока что бы две разные кнопки открывали один и тот же блок.

рони 31.03.2020 16:19
korifey,
не могу помочь, не понимаю что вам нужно.

korifey 31.03.2020 16:39
К примеру есть 2 кнопки.1-ая показывается при размере браузера >810 а 2-ая при <810 и они должны открывать один и тот же блок.Для этого я и сделал смену класса у того блока, но блок показывается и тут же исчезает.

рони 31.03.2020 17:09
korifey,
скрипт то дополнительный зачем?

рони 31.03.2020 17:15
Цитата:
Сообщение от korifey
К примеру есть 2 кнопки.1-ая показывается при размере браузера >810 а 2-ая при <810 и они должны открывать один и тот же блок.Для этого я и сделал смену класса у того блока, но блок показывается и тут же исчезает.
не понимаю, добавьте вторую кнопку в список rels и всё, зачем класс менять?

korifey 31.03.2020 17:32
Если у каждой кнопки свой блок
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
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>

korifey 31.03.2020 18:13
Ссори работает.
Еще вопросик.Есть <div class="h-n"></div> и надо что бы при любом открытом блоке он исчезал а при скрытом появлялся бы.

рони 31.03.2020 18:20
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>

korifey 31.03.2020 21:02
Огромное спасибо!!!

korifey 01.04.2020 16:39
А если пара кнопок находиться в открывшемся блоке.
<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>

рони 01.04.2020 16:56
Цитата:
Сообщение от korifey
А если пара кнопок находиться в открывшемся блоке.
не понимаю вопроса.

рони 01.04.2020 17:24
korifey,
вариант для кнопок в блоке .open
<!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;
    }
    #b6, #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>

<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>

    <script>

let open;
const rels=[['#b3','.men1'],['#b6','.msor']];
addEventListener( 'click' , ({target}) => {
let item = rels.find(([selector, ..._]) => target.closest(selector));
if(item) {
item = document.querySelector(item[1]);
if(!item) return;
item.classList.toggle('open');
}
else if(target.closest('.open')) return;
if(open && open != item) open.classList.remove('open');
open = item;
document.querySelector('.h-n').hidden = document.querySelector('.open');
})
</script>
</body>
</html>

korifey 01.04.2020 17:29
Ну на странице 4 кнопки открывающие каждая свой блок и открывшемся блоке кнопки b4 есть еще 2 кнопки при клике по которым так же открывались бы их блоки.
<!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>

<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>
    <script>

let open;
const rels=[['#b3','.isk'],['#b2','.cat-all'],['#b1','.isk'],['#b4','.men1'],['#b5','.cat-all'],['#b6','.msor']];


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 17:32
korifey,
для блока на строке 32 нужен другой класс!

рони 01.04.2020 17:36
korifey,
код используйте из поста #22

рони 01.04.2020 17:41
korifey,
['#b5','.cat']
<!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, .cat{width:300px;height:100px;border:1px solid #000000;display:none;text-align:center;padding-top:50px}
    div.open {
        display: block;
    }
    #b4, #b5, #b6{
        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>

<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">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'],['#b2','.cat-all'],['#b1','.isk'],['#b4','.men1'],['#b5','.cat'],['#b6','.msor']];
addEventListener( 'click' , ({target}) => {
let item = rels.find(([selector, ..._]) => target.closest(selector));
if(item) {
item = document.querySelector(item[1]);
if(!item) return;
item.classList.toggle('open');
}
else if(target.closest('.open')) return;
if(open && open != item) open.classList.remove('open');
open = item;
document.querySelector('.h-n').hidden = document.querySelector('.open');
})
</script>
</body>
</html>

korifey 01.04.2020 17:53
А можно сделать что бы кнопки b2 и b5 открывали один и тот же блок?

рони 01.04.2020 17:58
Цитата:
Сообщение от korifey
А можно сделать что бы кнопки b2 и b5 открывали один и тот же блок?
можно, речь выше о том, чтоб сами блоки должны быть разными , а в примере из поста 23 у вас два блока с одинаковым классом(откроется только первый), строка 26 и 32.

korifey 01.04.2020 18:08
Просто я иду последовательно сперва открытие и закрытие всех блоков а затем уже по каждому.Извините если что не так.
32 строку убрать.

korifey 01.04.2020 20:22
Еще раз огромное СПАСИБО!!!


Часовой пояс GMT +3, время: 05:20.