javascript - 切换 div 的可见性但添加 JavaScript 样式会把它弄乱

Question

所以我有一个 div，当页面首次加载时设置为 display:none。然后我添加了一个 js 文件以将其设置为在按下按钮时可见。

因此，当按下按钮时，我可以切换可见性，但现在当我添加一个 js 函数使其向下滑动到页面中(而不是仅仅让它出现和消失)时，它使 div在页面加载时显示并将 div 的可见性设置为不隐藏？

如果有人知道为什么会发生这种情况或有解决方法，那将大有帮助!谢谢!

js文件

var settingVisibility = false;

function showSettings() {
    if (settingVisibility) {
        document.getElementById("pan").style.display = "none";
    settingVisibility = false;
} else {
    document.getElementById("pan").style.display = "block";
    settingVisibility = true;
}
}

html文件

    <script>

        $(document).ready(function(){
        $("#pan").slideDown(450);});

    </script>


    <div id = "pan">
        <ul>
            <li>List 1</li>
            <li><input type = "checkbox">Item 1</li>
            <li><input type = "checkbox">Item 2</li>
            <li>List 2</li>
            <li><input type = "checkbox">Item 1</li>
            <li><input type = "checkbox">Item 2</li>
        </ul>
    </div>

CSS文件

#pan {

position:fixed;
right:0;
display:none;

}

Answer 1

JSBIN DEMO

slideDown 在页面加载后触发，它会覆盖 css 中提到的元素的 display:none 属性。

它实际上应该在 showSettings() 函数中。

还有一个建议，showSettings()函数可以这样:

function showSettings() {
   if(document.getElementById("pan").style.display==="block") {
      document.getElementById("pan").style.display = "none";
   } else {
      $("#pan").slideDown(450);;
   } 
}