Question

所以我想要实现的是，每当我点击其中一个div（彼此顶部）时，它会打开div并在另一个点击之后关闭它。我知道我需要使用Javascript / jQuery，我发现我应该使用addEventListener函数。此外，最初每个div都关闭并具有一定的高度。

[编辑]：正如@DanOvidiuBoncut所说，我希望有一个手风琴，并提出他的建议。我试图修改他共享的示例代码，但我无法使其工作。

HTML代码：

<div class="box box_1" id="first"></div>
<div class="box box_2" id="second"></div>
<div class="box box_3" id="third"></div>
<div class="box box_4" id="fourth"></div>
<div class="box box_5" id="fifth"></div>

每个div都有一些文字。

CSS代码：

height: 50px;
width: 100px;
display: block;
//each div has a particular color just to make it easier to distinguish them from each other.

但是我刚刚开始使用javascript，到目前为止我无法使其工作，所以任何帮助都将不胜感激！

Answer 1

使用$("div").click(function() { $(this).toggle(); });

http://api.jquery.com/toggle/查看教程..

Answer 2

$("div").click(
   function() { 
     $("div").hide(); 
     $(this).show();
   }
)

这将隐藏所有div，然后显示您刚刚点击的那个。

单击它们时，如何打开和关闭div

2 个答案: