javascript - 根据屏幕尺寸更改过渡类型

Question

基本上代码应该做什么 - 如果网站大小大于 750 像素，则下拉菜单会随着悬停效果向下滑动，但如果其小于 750 像素的下拉菜单在点击切换时起作用。

我检查媒体查询是否已更改(大于 750 像素 float == 左)和是否(小于 750 像素 float == 无) 如果我从 650 像素的 Web 宽度开始，它会在点击切换时起作用，但是当我将其调整为全屏然后返回到 650 像素时，它不仅在点击切换时显示为悬停和点击切换。

谁能解释我做错了什么？我对 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 函数每次触发时都会绑定(bind)一个事件，这在调整大小时会产生很多影响。更好的方法是摆脱调整大小功能并在事件中使用 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);
      }
});

您还应该使用 jQuery 的 on() 函数，而不是 hover() 或 click()。

引用:http://api.jquery.com/on/