Question

我有一个函数，该函数将不同的事件分配给不同的窗口宽度。使用我的代码，每次我调整浏览器窗口的大小时，都会触发此函数。但是，这种行为很奇怪：

。当我打开<1025的浏览器窗口时，切换正常。但是，如果我稍微调整窗口的大小，切换开关将停止工作。如果我再次调整大小，切换开关将再次起作用。它一直这样。

基本上，我想做的是将鼠标悬停在> 1024上，并在<1025处进行切换。

我在做什么错？这是我的代码：

<body>

<style>

#dynamicbutton {
    width: 300px;
    text-align: center;
    padding: 10px;
    background-color: #ddd;
    cursor: pointer;
    }

#dynamiclist {
    display: none;
    }

</style>

<script>

$(document).ready(function() {

    function cresnavmaster() {

    if ($(window).width() > 1024) {

    $("#dynamicbutton").mouseover(function(){                         
        $("#dynamiclist").show();
        });

    $("#dynamicbutton").mouseout(function(){                          
        $("#dynamiclist").hide();
        });    


}

if ($(window).width() < 1025) {   

    $("#dynamicbutton").click(function(){                         
        $("#dynamiclist").toggle();
        });

}

}

cresnavmaster(); // Calls function when the page first loads

var resizelistener; // Adds short delay each time browser window is resized

$(window).resize(function(){
   clearTimeout(resizelistener);
   resizelistener = setTimeout(function(){
   cresnavmaster();
   },500);
});  

});

</script>

<div id="dynamicbutton">Dynamic Button</div>

<ul id="dynamiclist">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>


</body>

Answer 1

您的代码看起来不错，但是因为您有2条if语句，而不是if else。每次触发事件时，您始终会同时检查两个if语句。因此，如果第二条if语句为true，它将始终覆盖您所做的是第一条if语句试试这个：

pivot_table

每次调整窗口大小时，我的jQuery函数如何才能始终如一地工作？

1 个答案: