Question

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

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

如果有人知道为什么会这样，或者某种方法来解决这个问题会有很大帮助！谢谢！

js file

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

Answer 2

slideDown函数为元素设置动画并使其可见。如果您希望元素在页面加载时隐藏，请从docuemnt ready部分中删除$("#pan").slideDown(450);行，并在要显示元素时添加（如此plunker中所示）：

var settingVisibility = false;

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

切换div的可见性，但添加JavaScript样式会让它变得混乱

2 个答案: