30.03.2020, 20:15
|
|
Интересующийся
|
|
Регистрация: 30.03.2020
Сообщений: 28
|
|
|
Открыть, закрыть несколько блоков на javascript
Помогите сделать открытие блоков при кликах по кнопкам и закрытии этих блоков при повторном клике по кнопке или в любом месте вне этого блока.
var rels=[['#b3','.isk'],['#b2','.cat-all'],['#b1','.isk'],['#b4','.men1'],['#b5','.cat-all'],['#b6','.msor']];
где 1-кнопки а 2-блоки к ним. |
|
31.03.2020, 10:53
|
|
Интересующийся
|
|
Регистрация: 30.03.2020
Сообщений: 28
|
|
|
На jquery мне не надо.Нужно на javascript без лишних библиотек.
|
|
31.03.2020, 11:05
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
korifey,
поищите по форуму на js "открывашка", либо сделайте минимальный макет html/css
|
|
31.03.2020, 13:50
|
|
Интересующийся
|
|
Регистрация: 30.03.2020
Сообщений: 28
|
|
Попытался так
<!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
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
открывашка зависимая закрытие по клику вне элементов 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>
Последний раз редактировалось рони, 01.04.2020 в 20:02.
|
|
31.03.2020, 14:47
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
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>
|
|
31.03.2020, 15:43
|
|
Интересующийся
|
|
Регистрация: 30.03.2020
Сообщений: 28
|
|
А почему так не работает?
<!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
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
korifey,
что должен делать код?
|
|
31.03.2020, 16:03
|
|
Интересующийся
|
|
Регистрация: 30.03.2020
Сообщений: 28
|
|
|
При сужении браузера меняется класс у блока что бы две разные кнопки открывали один и тот же блок.
|
|
|
|
