在 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)指的是我們clicked的element ，然后我們得到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>

Answer 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");
  });
});

Answer 3

我認為您希望您的近距離跨度只是切換與它們相關的 div，或者？ 在這種情況下，您可以像這樣修改您的 JS

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