Показать элемент сразу после щелчка

Когда я нажимаю section, как переключить другой div?Показать элемент сразу после щелчка

Вот мой код:

<body> 
<div id="div1" onClick="toggle_visibility('div2')"> 
    <section id="0" value="0" > room 101 </section> 
    <section id="1" value="0"> room 102</section> 
    <section id="2" value="0"> room 103 </section> 
    <section id="3" value="0"> room 104 </section> 
    <section id="4" value="0"> room 105 </section> 
</div> 

<div id="div2" style="display:none"> 
    <section id="0" value="0"> item1 </section> 
    <section id="1" value="0"> item2 </section> 
    <section id="2" value="0"> item3 </section> 
    <section id="3" value="0"> item4 </section> 
    <section id="4" value="0"> item5 </section> 
</div> 

<script> 
function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display == 'none'; 
    else 
     e.style.display = 'block'; 
} 
</script> 
</body>

Я хочу, чтобы на выходе, как это: когда я нажимаю любую комнату, то все пять пунктов будут переключены и показаны только под комнате.

Например: Когда я нажимаю номер 101, результат должен выглядеть следующим образом:

room 101 
item1 
item2 
item3 
item4 
item5 
room 102 
room 103 
room 104 
room 105

источник

2014-12-23 Steven

Вы должны использовать интерактивный элемент, как 'button' или' Ā' вместо дел. Если вы настаиваете на использовании 'div', вам нужно добавить' role = 'кнопку '', 'tabindex',' onkeydown' и т. Д., Чтобы сделать ее доступной. – danielnixon

Сниппет ниже будет делать это.

Он получает section, который нажал кнопку event.target.

Он перемещает div2 на это section с помощью appendChild.

Он также исправляет ошибку в вашем коде. Это:

e.style.display == 'none';

& hellip; должно быть:

e.style.display = 'none';

Код:

function toggle_visibility(event) { 
 
    var e = document.getElementById('div2'); 
 
    event.target.appendChild(e); 
 
    
 
    if(e.style.display === 'block') { 
 
    e.style.display = 'none'; 
 
    } 
 
    else { 
 
    e.style.display = 'block'; 
 
    } 
 
}

<div id="div1" onClick="toggle_visibility(event)"> 
 
    <section id="0" value="0"> room 101 </section> 
 
    <section id="1" value="0"> room 102 </section> 
 
    <section id="2" value="0"> room 103 </section> 
 
    <section id="3" value="0"> room 104 </section> 
 
    <section id="4" value="0"> room 105 </section> 
 
</div> 
 

 
<div id="div2" style="display:none"> 
 
    <section id="0" value="0"> item1 </section> 
 
    <section id="1" value="0"> item2 </section> 
 
    <section id="2" value="0"> item3 </section> 
 
    <section id="3" value="0"> item4 </section> 
 
    <section id="4" value="0"> item5 </section> 
 
</div>

источник

2014-12-23 20:50:31

Ну я использую JQuery отсоединение/appendTo mecahnism. Я положил скрытый DIV в HTML, и когда я делаю это:

$('#element').detach().appendTo('#hiddendiv')

тогда, когда я хочу, чтобы вернуть его, я просто инвертировать процесс с родителем # элемента в качестве пункта назначения.

источник

2014-12-23 20:11:35

Смотрите теги, jQuery не существует. это должно быть решением. Я думаю, что потребности OP - это чисто JS:/ –

Это должно работать, по щелчку на разделе в див1 переключите каждый раздел в div2, отделить их и добавить их после текущей секции, которая была нажата:

$('#div1 section').click(function() { 
    var det = $("#div2 section").toggle().detach(); 
    $(this).after(det); 
});

источник

2014-12-23 20:12:49 apsdehal

Смотрите теги, jQuery там нет. это должно быть решением. Я думаю, что потребности ОП - это чисто JS: / –

Показать элемент сразу после щелчка

ответ

Смежные вопросы