在 JavaScript 中显示隐藏函数答案

【问题标题】：Show Hide function in JavaScript在 JavaScript 中显示隐藏函数
【发布时间】：2020-09-03 11:29:39
【问题描述】：

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

【问题讨论】：

你能分享你的 CSS 吗？
.close{padding:0 5px;margin-left:10px;cursor:pointer;}

标签： javascript show-hide

【解决方案1】：

您可以使用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>

【讨论】：

@FurkanÇetin 很乐意为您提供帮助。请点击我答案中的灰色复选标记接受我的答案。谢谢
@FurkanÇetin 我建议您为将来的任何实现唯一标识您的列表，并更好、更清晰地了解您的 DOM。
@Sanguinary 类可以为多个元素重复。 $(this) 帮助我们点击了什么。 OP 代码本身就很好。
这个实现适用于这个非常具体的例子，但它依赖于按钮是列表的兄弟。这种行为乍一看并不清楚，单独识别元素会更安全。
@AlwaysHelping 是的，同意。此代码适用于此特定示例。但总的来说，尝试并考虑边缘情况和面向未来的场景是一种很好的做法。显示/隐藏按钮在页面内移动后将立即停止工作。

【解决方案2】：

为了让每个列表单独工作，必须有某种唯一标识符，以便 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");
  });
});

【讨论】：

这将是正确的方法。似乎 OP 只是忘记了唯一标识列表。
@Sanguinary 这里没有必要添加数据属性，因为可以为多个元素重复类。 $(this) 帮助我们点击了什么。
@AlwaysHelping 数据属性在按钮和按钮显示/隐藏的列表之间创建语义链接。不单独识别它们依赖于其他机制，例如检查按钮的同级，但是此功能会在您想要将按钮移动到不同位置的第二秒中断。

【解决方案3】：

我认为您希望您的关闭跨度仅切换与它们相关的 div，或者？在这种情况下，你可以修改你的 JS 像

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

【讨论】：