Question

我有一个带有按钮的HTML页面，按下该按钮会隐藏内容。我使用的jquery代码已捆绑到我的HTML页面中。当我按下按钮显示隐藏div中的内容时，它可以找到，但是当我再次按下按钮隐藏内容时没有任何反应。如果有人能帮助我那会很棒。另外，我如何能够定位多个按钮。我只是粘贴相同的jquery代码并将其标记为“2”然后标记为“3”，以此类推？任何有效的例子都会很棒。这是我的代码：

HTML：

<head>
    <script>
        $(document).ready(function() {
            $("#spoiler1").hide();

            $("#button1").click(function() {
                $("#spoiler1").show(300);
            });
        });
    </script>
</head>

<button id="button1">Adventurer &#x25BC;</button>

<div id="spoiler1" style="display:none">
    <p>1. Climb a tree<input type="checkbox" /></p>
    <p>2. Roll down a really big hill<input type="checkbox" ></p>
    <p>3. Camp out in the wild<input type="checkbox" ></p>
    <p>4. Build a den<input type="checkbox" ></p>
    <p>5. Skim a stone<input type="checkbox" ></p>
</div>

提前感谢您的任何帮助或建议。

Answer 1

使用.toggle()代替

$(document).ready(function () {
    $("#spoiler1").hide();

    $("#button1").click(function () {
        $("#spoiler1").toggle('slow');
    });
});

Demo

<强>更新

关于有多个按钮的想法，我已经提出了你应该尝试的方法，使用classes代替IDs按钮并提供相同的{{1}要切换到ID。这可能会带来一些设计问题，但您可以进行管理，这只是向前推进的基本准则。

由于Markup对于多个div来说太长了所以我只能发帖。

<强> JQuery的

divs

Updated Fiddle

Answer 2

多按钮事件。为该按钮指定一个类名，以便您可以按类选择。

$('button.toggle-div').click(function(){...});

至于可见性切换，有很多种方法。

在toggle()中使用jQuery。（最明显的选择，但在实践中我们也可以......）
使用toggleClass() link 添加/删除具有display:none css规则的类。（更灵活，您可以切换其他CSS样式，如字体颜色，背景等）
使用一些双向绑定JavaScript库，如knockoutjs或angular。（对于小型应用程序来说可能是一种过度杀伤力。但它会如果规模很大，肯定会减少编码量。）

Answer 3

$(document).ready(function(){
    $("#spoiler1").hide();
$("#button1").click(function(){
    if($("#spoiler1").is(':visible')){
       $("#spoiler1").slideUp(300);
       }
       else
       {
       $("#spoiler1").slideDown(300);
       }
});
});

演示：

http://jsfiddle.net/YvUDV/

Answer 4

改为使用切换：

$('#button1').bind("click",function(){
    $("#spoiler1").toggle("fast");
});

用按钮显示/隐藏div

4 个答案: