在 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() 来打开 element 旁边的 span（隐藏）

在jQuery中，$(this)指的是element，我们有clicked，然后我们得到next()元素，也就是你的.content class 慢速切换。

这边。你必须一次又一次地写 code。

现场演示：

$(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>

Answer 2

我想你希望你的 close span 只切换它们相关的 div，或者？在这种情况下，您可以像

一样修改您的 JS

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

Answer 3

为了让每个列表单独工作，必须有某种唯一标识符，这样 jQuery 知道在单击时应该关闭哪个列表。

尝试这样的事情：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    Contents<span class="close" data-target="#list-1">hide</span>
    <div  class="content" id="list-1">
        <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" data-target="list-2">hide</span>
    <div  class="content" id="list-2">
        <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>

$(document).ready(function(){
  $(".close").click(function(){
    var closeBtn = $(this)
    $(closeBtn.data('target')).toggle("slow");
  });
});

在 JavaScript 中显示隐藏功能

Show Hide function in JavaScript

javascript

show-hide