Открыть, закрыть несколько блоков на javascript
Помогите сделать открытие блоков при кликах по кнопкам и закрытии этих блоков при повторном клике по кнопке или в любом месте вне этого блока.
var rels=[['#b3','.isk'],['#b2','.cat-all'],['#b1','.isk'],['#b4','.men1'],['#b5','.cat-all'],['#b6','.msor']]; где 1-кнопки а 2-блоки к ним. |
korifey,
Цитата:
|
На jquery мне не надо.Нужно на javascript без лишних библиотек.
|
korifey,
поищите по форуму на js "открывашка", либо сделайте минимальный макет html/css |
Попытался так
<!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> но работает коряво, особенно кнопки с одинаковыми блоками. |
открывашка зависимая закрытие по клику вне элементов 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> |
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> |
А почему так не работает?
<!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> |
korifey,
что должен делать код? |
При сужении браузера меняется класс у блока что бы две разные кнопки открывали один и тот же блок.
|
korifey,
не могу помочь, не понимаю что вам нужно. |
К примеру есть 2 кнопки.1-ая показывается при размере браузера >810 а 2-ая при <810 и они должны открывать один и тот же блок.Для этого я и сделал смену класса у того блока, но блок показывается и тут же исчезает.
|
korifey,
скрипт то дополнительный зачем? |
Цитата:
|
Если у каждой кнопки свой блок
const rels=[['#b3','.isk'],['#b2','.mcat-all'],['#b1','.misk'],['#b4','.men1'],['#b5','.cat-all'],['#b6','.msor']]; то Ваш код работает, а если у двух кнопок 1 общий блок const rels=[['#b3','.isk'],['#b1','.isk']]; не работает.Вот я и попробовал изменить класс. |
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> |
Ссори работает.
Еще вопросик.Есть <div class="h-n"></div> и надо что бы при любом открытом блоке он исчезал а при скрытом появлялся бы. |
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> |
Огромное спасибо!!!
|
А если пара кнопок находиться в открывшемся блоке.
<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> |
Цитата:
|
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> |
Ну на странице 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> |
korifey,
для блока на строке 32 нужен другой класс! |
korifey,
код используйте из поста #22 |
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> |
А можно сделать что бы кнопки b2 и b5 открывали один и тот же блок?
|
Цитата:
|
Просто я иду последовательно сперва открытие и закрытие всех блоков а затем уже по каждому.Извините если что не так.
32 строку убрать. |
Еще раз огромное СПАСИБО!!!
|
Часовой пояс GMT +3, время: 08:53. |