在JavaScript中显示隐藏功能

问题描述

我想用一个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>

解决方法

您可以使用jQuery功能next()来打开element（隐藏）旁边的span

在jQuery中，$(this)指的是element上的clicked，然后我们得到next()元素，它是您的.content类，可以在那。

这样。您必须一次又一次地写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>

,

为了使此列表对每个列表分别起作用，必须有某种唯一标识符，以便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");
  });
});

,

我想您希望您的近距仅切换与它们相关的div，或者？在这种情况下，您可以像这样修改JS

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