在单击一个元素之后立即显示一个元素
[英]Show an element right after one that has been clicked
问题描述
When I click a section , how to toggle another div ? 
当我单击一个section ，如何切换另一个div ？
Here is my code: 这是我的代码：
<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>
I want the output like this: when I click any room, the all five items will be toggled and shown just beneath the room. 我想要这样的输出：当我单击任何房间时，所有五个项目都将被切换并显示在房间下方。
For example: When I click room 101, the outcome should looks like this: 例如：当我单击房间101时，结果应如下所示：
room 101
item1
item2
item3
item4
item5
room 102
room 103
room 104
room 105
3 个解决方案
解决方案1
0 2014-12-23 20:11:35
Well I use jquery detach/appendTo mecahnism. 好吧，我使用jQuery detach / appendTo机制。 I put a hidden div in the html and when I do this: 我在HTML中放置了一个隐藏的div，当我这样做时：
$('#element').detach().appendTo('#hiddendiv')
then when I want to put it back I just invert the process with #element's parent as destination. 然后，当我想放回原处时，我只是以#element的父对象为目标来反转该过程。
解决方案2
0 2014-12-23 20:12:49
This should work, on click on section in div1, toggle every section in div2, detach them and append them after the current section which was clicked: 这应该起作用，单击div1中的部分，切换div2中的每个部分，分离它们并将它们附加在单击的当前部分之后：
$('#div1 section').click(function () {
var det = $("#div2 section").toggle().detach();
$(this).after(det);
});
解决方案3
0 已采纳 2014-12-23 20:50:31
The snippet below will do it. 下面的代码片段将完成此操作。
It gets the section that's clicked by using event.target . 它使用event.target获取单击的section 。
It moves div2 to that section by using appendChild . 通过使用appendChild将div2移至该section 。
It also corrects an error in your code. 它还可以更正您的代码中的错误。 This: 这个：
e.style.display == 'none';
… should be: … 应该：
e.style.display = 'none';
Code: 码：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.