javascript - 隐藏 div 上的 JQuery 切换无法正常工作

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

Bootstrap 中的 hidden 类包含 visibility: hide，这就是导致问题的原因。仅将元素设置为 display: none 即可工作:

#somedata {
    display: none;
}

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

Updated fiddle