根據屏幕尺寸更改過渡類型

Question

基本上，代碼應該執行的操作-如果網站大小大於750像素，則下拉菜單會隨着鼠標懸停效果而下滑，但如果其小於750像素的下拉菜單會在點擊切換時起作用。

我檢查媒體查詢是否已更改（大於750px浮點==左）以及是否（小於750 px浮點==無）更改了（如果我以650 px的網頁寬度開始，但在我將其調整為全屏尺寸時可以使用onclick切換）然后返回到650像素，它顯示為懸停和onclick切換，而不僅僅是單擊切換。

任何人都可以解釋我在做什么錯？ 我對jQuery很陌生。

提前致謝！

$(document).ready(function() {
    checkSize();
    $(window).resize(checkSize);
});

//Function to the css rule
function checkSize() {
    if ($("#drop > li").css("float") == "none") {
        $('#dropdown-btn').click(function() {
            $('.dropdown').slideToggle(200);

        });
    } else if ($("#drop > li").css("float") == "left") {
        $('#dropdown-btn').hover(
            function() {
                $('.dropdown').slideDown(200);




            },
            function() {
                $('.dropdown').slideUp(200);


            }

        );
    }
}; 

Answer 1

我認為您的問題是事實，您的checkSize函數每次觸發一次都會綁定一個事件，這在調整大小上有很多。 更好的方法是擺脫大小調整函數，並在事件中使用if語句，如下所示：

$(document).ready(function() {

    $('#dropdown-btn').on('click',function() {
      if($("#drop > li").css("float") == "none"))
        $('.dropdown').slideToggle(200);
    });

    $('#dropdown-btn').on({
      mouseenter: function () {
        //stuff to do on mouse enter
        if ($("#drop > li").css("float") == "left")
          $('.dropdown').slideDown(200);
      },
      mouseleave: function () {
        //stuff to do on mouse leave
        if ($("#drop > li").css("float") == "left")
          $('.dropdown').slideUp(200);
      }
});

您還應該使用jQuerys on()函數而不是hover()或click() 。

參考： http ： //api.jquery.com/on/