Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 01.04.2020, 16:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от korifey
А если пара кнопок находиться в открывшемся блоке.
не понимаю вопроса.
Ответить с цитированием
  #22 (permalink)  
Старый 01.04.2020, 17:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #23 (permalink)  
Старый 01.04.2020, 17:29
Интересующийся
Отправить личное сообщение для korifey Посмотреть профиль Найти все сообщения от korifey
 
Регистрация: 30.03.2020
Сообщений: 28

Ну на странице 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>
Ответить с цитированием
  #24 (permalink)  
Старый 01.04.2020, 17:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

korifey,
для блока на строке 32 нужен другой класс!
Ответить с цитированием
  #25 (permalink)  
Старый 01.04.2020, 17:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

korifey,
код используйте из поста #22
Ответить с цитированием
  #26 (permalink)  
Старый 01.04.2020, 17:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #27 (permalink)  
Старый 01.04.2020, 17:53
Интересующийся
Отправить личное сообщение для korifey Посмотреть профиль Найти все сообщения от korifey
 
Регистрация: 30.03.2020
Сообщений: 28

А можно сделать что бы кнопки b2 и b5 открывали один и тот же блок?
Ответить с цитированием
  #28 (permalink)  
Старый 01.04.2020, 17:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от korifey
А можно сделать что бы кнопки b2 и b5 открывали один и тот же блок?
можно, речь выше о том, чтоб сами блоки должны быть разными , а в примере из поста 23 у вас два блока с одинаковым классом(откроется только первый), строка 26 и 32.
Ответить с цитированием
  #29 (permalink)  
Старый 01.04.2020, 18:08
Интересующийся
Отправить личное сообщение для korifey Посмотреть профиль Найти все сообщения от korifey
 
Регистрация: 30.03.2020
Сообщений: 28

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

Еще раз огромное СПАСИБО!!!

Последний раз редактировалось korifey, 01.04.2020 в 20:27.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выдвет ошибку 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