使用JavaScript隐藏/显示特定的div

Question

我想要这样的HTML元素引用

<html>        X
- description -

<head>        X
- description -

<body>        X
- description -

默认情况下，元素的说明是隐藏的，因此当我单击包含该元素说明的“ X”或DIV时，再次单击该说明会显示或隐藏。

这是我的HTML代码：

<h1>HTML Reference</h1>
  <div id="reference-list">
      <div class="list-element">&lt;html&gt;</div>
      <div class="element-desc">Here's go description</div>
      <div class="list-element">&lt;head&gt;</div>
      <div class="element-desc">Here's go description</div>
  </div>

我尝试使用jQuery，但是我不知道如何选择包含该元素说明的特定div，因为所有div都具有相同的类（否则，我将必须为每个HTML元素创建100个类）。

我试过的是：

<script>
$(document).ready(function(){
    $(".list-element").click(function(){
        $(".element-desc").toggle();
    });
});
</script>

这不起作用，因为它显示/隐藏了网站上所有元素的描述。

Answer 1

如果多数民众赞成在您元素的正确位置，则可以使用.next() 。

 $(document).ready(function(){ $(".list-element").click(function(){ $(this).next().toggle(); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1>HTML Reference</h1> <div id="reference-list"> <div class="list-element">&lt;html&gt;</div> <div class="element-desc">Here's go description</div> <div class="list-element">&lt;head&gt;</div> <div class="element-desc">Here's go description</div> </div>

Answer 2

您正在使用$(".element-desc")选择器选择所有元素描述。 尝试这样做：

$(document).ready(function(){
    $(".list-element").click(function(){
        $(this).next().toggle();
    });
});

使用next选择下一个元素。 基本上，您想使选择器更具体，而使用next是该方法的一个示例

使用JavaScript隐藏/显示特定的div

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-05-12 01:23:34

解决方案2
0 2016-05-12 01:24:47

使用JavaScript隐藏/显示特定的div

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-05-12 01:23:34

解决方案2 0 2016-05-12 01:24:47

解决方案1
0 已采纳 2016-05-12 01:23:34

解决方案2
0 2016-05-12 01:24:47