javascript - 创建一个通用的扰流板盒

Question

$(document).ready(function(){
  $("#spoil").click(function(){
    $(this).toggle();
  });
});

我正在使用 Jquery 创建一个扰流板或下拉框，因此您单击按钮然后信息消失，然后当您再次单击它时它又回来了。我计划拥有其中的许多，并且想知道如何转换我的代码，以便它可以与所有扰流框一起使用，而无需每次都更改 js。谢谢

我只是在切换框的内容而不是它本身的按钮之后。

Answer 1

你的意思是

现场演示

$(function() {
    $(".toggle").on("click",function() {
        $(".toggled").toggle().removeClass("toggled");
        $(this).next(".spoiler").toggle().addClass("toggled");
    })
});

使用链接我会添加preventDefault：

$(function() {
    $(".toggle").on("click",function(e) {
        e.preventDefault(); // do not follow the link
        $(".toggled").toggle().removeClass("toggled");
        $(this).next(".spoiler").toggle().addClass("toggled");
    })
});

Answer 2

使用类，.spoil而不是 ID，#spoil然后您可以在.spoil该类中拥有任意数量的元素。

JS：

$(document).ready(function(){
  $(".spoil").click(function(){
    $(this).toggle();
  });
});

HTML：

<div class="spoil"></div>
<div class="spoil"></div>
<div class="spoil"></div>

Answer 3

听起来您只需要使用类，而不是 id。通常不需要或不推荐使用 id。

$(document).ready(function(){
  $(".spoil").click(function(){ //bind a click function to all elements with class "spoil"
    $(this).toggle();
  });
});