Question

我有一个可以切换到狭窄图标栏的自举侧边栏，现在我需要在屏幕高度大于768时显示侧边栏，并在高度低于768时显示到窄边栏。但是我的脚本似乎在低于768时触发点击事件，因此如果我多次调整屏幕大小，并且当高度低于768时，它会连续多次切换侧边栏。如果高度超过768，则切换停止。

我的代码是：

$("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
        $("span", this).toggleClass("fa fa-lock fa fa-unlock");
    });
$("#menu-toggle-2").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled-2");
        $("span", this).toggleClass("fa fa-lock fa fa-unlock");
    });

$(document).ready(function() {
    var $window = $(window);

        // Function to handle changes to style classes based on window width
        function checkWidth() {
          if ($window.height() <= 768) {
              $("#wrapper").toggleClass("toggled-2");

          }
          else if ($window.height() > 768) {
              $("#wrapper").toggleClass("toggled");
          }
      }

    // Execute on load
    checkWidth();
    // Bind event listener
        $(window).resize(checkWidth);
});

任何帮助都表示赞赏，并提前致谢。

Answer 1

您确定点击事件是否正在触发？（尝试在点击功能中进行记录以使用console.log）

进行确认

根据您发布的代码，在调整窗口大小时，resize可能会多次触发。

尝试使用以下内容：

$(window).resize($.throttle(checkWidth, 300));

Throttle返回一个新函数，每300ms执行一次（或您决定设置的任何延迟）

注意：这使用jQuery debounce / throttle插件

https://code.google.com/archive/p/jquery-debounce/

调整窗口大小始终会触发点击事件

1 个答案: