Question

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

我正在使用Jquery创建扰流板或下拉框，因此您单击按钮然后信息消失，然后当您再次单击它时它会返回。我正在计划中有很多这些并且想知道如何转换我的代码，以便它可以与所有扰码器盒一起使用，而不需要每次都改变js。谢谢

我只是在切换盒子的内容而不是它自己的按钮之后。

Answer 1

你的意思是

Live Demo

$(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();
  });
});

创建一个通用扰流板箱

3 个答案: