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

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


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