Javascript 根据屏幕大小更改转换类型

基本上代码应该做什么-若网站大小大于750像素，那个么下拉菜单会以悬停效果向下滑动，但若其小于750像素，那个么下拉菜单会在点击切换时工作

我检查媒体查询是否已更改为（大于750px浮点==左）和（小于750 px浮点==无） 如果我从650px的web宽度开始，它可以运行onclick-toggle，但当我将其调整为全屏，然后返回到650px时，它不仅在单击切换时显示为悬停和onclick-toggle

谁能解释我做错了什么？我对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);


            }

        );
    }
}; 

---

我认为您的问题在于，您的checkSize函数每次触发时都会绑定一个事件，这在调整大小方面非常重要。更好的方法是去掉resize函数，并在事件中使用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（）

---

参考资料：

我想我应该重新构造，在单击时调用

checkSize（）

，然后执行相应的菜单操作。实际上，您正在多次创建新的单击函数。

$。单击（处理程序）

是

$的简写。在（'click'，handler）

。这是正确的，根本不是必须的。无论如何，使用

on

over

click

是一种更好的做法，原因有几个。裁判：