Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.03.2020, 20:15
Интересующийся
Отправить личное сообщение для korifey Посмотреть профиль Найти все сообщения от korifey
 
Регистрация: 30.03.2020
Сообщений: 28

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

где 1-кнопки а 2-блоки к ним.
Ответить с цитированием
  #2 (permalink)  
Старый 30.03.2020, 20:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

korifey,
Сообщение от рони
Открывашка 204 + закрытие по клику вне блока или кнопок чем не оно
https://javascript.ru/forum/dom-wind...tml#post385057
Ответить с цитированием
  #3 (permalink)  
Старый 31.03.2020, 10:53
Интересующийся
Отправить личное сообщение для korifey Посмотреть профиль Найти все сообщения от korifey
 
Регистрация: 30.03.2020
Сообщений: 28

На jquery мне не надо.Нужно на javascript без лишних библиотек.
Ответить с цитированием
  #4 (permalink)  
Старый 31.03.2020, 11:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

korifey,
поищите по форуму на js "открывашка", либо сделайте минимальный макет html/css
Ответить с цитированием
  #5 (permalink)  
Старый 31.03.2020, 13:50
Интересующийся
Отправить личное сообщение для korifey Посмотреть профиль Найти все сообщения от korifey
 
Регистрация: 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>

но работает коряво, особенно кнопки с одинаковыми блоками.
Ответить с цитированием
  #6 (permalink)  
Старый 31.03.2020, 14:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

открывашка зависимая закрытие по клику вне элементов 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.
Ответить с цитированием
  #7 (permalink)  
Старый 31.03.2020, 14:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #8 (permalink)  
Старый 31.03.2020, 15:43
Интересующийся
Отправить личное сообщение для korifey Посмотреть профиль Найти все сообщения от korifey
 
Регистрация: 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>
Ответить с цитированием
  #9 (permalink)  
Старый 31.03.2020, 15:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

korifey,
что должен делать код?
Ответить с цитированием
  #10 (permalink)  
Старый 31.03.2020, 16:03
Интересующийся
Отправить личное сообщение для korifey Посмотреть профиль Найти все сообщения от korifey
 
Регистрация: 30.03.2020
Сообщений: 28

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34
Несколько div блоков. Переключение по нажатии на соответствующую ссылку. Help$ Элементы интерфейса 4 25.09.2010 00:01
JavaScript на Яндекс.Фотки - почему тормозит браузеры? ZavFirefox Javascript под браузер 23 27.09.2009 19:24
Помогите решить несколько мат. задач в javascript 4_omd Общие вопросы Javascript 5 02.05.2009 12:02
Открыть с помощью javascript скрытый слой msprog Общие вопросы Javascript 1 07.09.2008 18:54