javascript - JavaScript 中的显示隐藏函数

Question

我想用一个 JavaScript 函数打开和关闭这些列表。
我不想为每个列表编写多个 JavaScript 函数。
我能怎么做？以上是我的代码

$(document).ready(function(){
   $(".close").click(function(){
     $(".content").toggle("slow");
   });
 });

.close {padding:0 5px;margin-left:10px;cursor:pointer;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  Contents
  <span class="close">hide</span>
  <div  class="content">
    <ul>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
    </ul>
  </div>
</div>

<div>
  Contents
  <span class="close">hide</span>
  <div  class="content">
    <ul>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
    </ul>
  </div>
</div>

Answer 1

您可以使用jQuery函数next()切换 span 旁边的 element(隐藏)

在 jQuery 中，$(this) 指的是我们点击的元素，然后我们得到next() 元素是您的 .content 类，用于缓慢切换。

这边走。您必须一次又一次地编写代码。

现场演示:

$(document).ready(function() {
  $(".close").click(function() {
    $(this).next().toggle("slow");
  });
});

.close {
  padding: 0 5px;
  margin-left: 10px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  Contents<span class="close">hide</span>
  <div class="content">
    <ul>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
    </ul>
  </div>
</div>
<div>
  Contents<span class="close">hide</span>
  <div class="content">
    <ul>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
      <li><a href="">link</a></li>
    </ul>
  </div>
</div>