Question

当我点击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

Answer 1

我使用jquery detach / appendTo mecahnism。我在html中放了一个隐藏的div，当我这样做时：

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

然后当我想把它放回去时，我只是用＃element的父作为目的地来反转过程。

Answer 2

这应该可以工作，点击div1中的部分，切换div2中的每个部分，分离它们并在点击的当前部分后附加它们：

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

Answer 3

下面的代码段就可以了。

使用event.target获取点击的section。

使用appendChild将div2移至section。

它还可以纠正代码中的错误。这样：

e.style.display == 'none';

......应该是：

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>

在单击一个元素后立即显示元素

3 个答案: