Question

我想在点击按钮时切换某些div的可见性。我的HTML看起来像是

<div id="button">
    <button> button </button>
</div>
<div id="somedata" class="hidden">
    <label> some data</label>
</div>

对应的JQuery代码是

$("#button").click( function() {
     $("#somedata").removeClass("hidden");
     $("#somedata").fadeToggle("slide");
});

除了第一次单击按钮外，此功能完美无缺。当您第一次单击该按钮时，它会立即出现并立即消失。

我真的需要默认隐藏这个div。

点击此链接进行演示： JSFiddle link

提前致谢，

此致

内甚

Answer 1

以hidden开头：交换2行

$("#somedata").removeClass("hidden");
$("#somedata").fadeToggle("slide");

到

$("#somedata").fadeToggle("slide");
$("#somedata").removeClass("hidden");

Answer 2

Bootstrap中的hidden类包含visibility: hidden，这是造成问题的原因。将元素设置为display: none，它可以正常工作：

#somedata {
    display: none;
}

$("#button").click(function () {
    $("#somedata").fadeToggle("slide");
});

Updated fiddle

Answer 3

您可以使用.toggle（）函数，它将完成工作。

<div id="button">
    <button> button </button>
</div>
<div id="somedata">
    <label> some data</label>
</div>

<script>
    $("#button").click(function () {
        $("#somedata").toggle(500); //animation in milliseconds
    });
</script>

JQuery切换隐藏的div不能正常工作

3 个答案: