Как моя функция jQuery может работать последовательно при каждом изменении размера окна? - PullRequest
Новая
       32

Как моя функция jQuery может работать последовательно при каждом изменении размера окна?

0 голосов
/ 16 октября 2018

У меня есть функция с разными событиями, назначенными разной ширине окна.С моим кодом, каждый раз, когда я изменяю размер окна браузера, эта функция срабатывает.Однако поведение странное:

.Когда я открываю окно браузера на <1025, переключатель работает нормально.Но если я немного изменю размер окна, то перестанет работать тумблер.Если я снова изменяю размер, переключатель снова работает.Это продолжается так.</p>

По сути, я пытаюсь навести курсор мыши на> 1024 и переключить на <1025. </p>

Что я делаю не так?Вот мой код: 

<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>

1 Ответ

0 голосов
/ 16 октября 2018

Ваш код выглядит нормально, но потому что у вас есть 2 оператора if вместо if else.Вы всегда проверяете оба оператора if каждый раз, когда происходит событие.Поэтому, если второе утверждение if истинно, оно всегда перезаписывает то, что вы сделали, это первое утверждение if. Попробуйте это: 

if ($(window).width() > 1024) {
    // different events here
}

else if ($(window).width() < 1025) {   
    // different events here
}

}
...