javascript - 显示/隐藏在一个div下触发点击事件的地方

Question

progress

$(".button-toggle").click(function(e){
  $(this).parents.find('#second').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
  <a href="#" class="buttong-toggle">
    <button>Show/Hide</button>
  </a>
</div>
    
<div id="second">
  larger section
</div>

您可以从 fiddle 中看出，这是行不通的。我试图弄清楚如何遍历 DOM，因为“this”事件不在整个 DOM 的上下文中运行，所以我想它无法找到#second ID

Answer 1

正确代码: https://jsfiddle.net/orttv29j/

修复:

• anchor 标签“class="button-toggle"而不是“buttong”中的类名。
• 要定位另一个类或 ID，您需要使用该类或 ID 名称，而不是“this”。 this 指的是您用来触发该函数的处理程序，在本例中为按钮。 (您不需要知道目标元素位于同一父容器中还是其他容器中，javascript 通过获取它们在切换函数中传递的 id 或类名来自行完成)<

$(".button-toggle").click(function(e){
  $("#second").toggle();
});

#first{
  background-color: dodgerblue;
  min-height: 100px;
  margin: 20px;
}
#second{
  background-color: gray;  
  min-height: 200px;
  margin: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
  <a href="#" class="button-toggle">
    <button>Click</button>
  </a>
</div>

<div id="second">
  larger section
</div>