JQuery 在 wordpress 上运行不一致

Question

在我的 WP 网站中，我有一个 div 和当前菜单项 .side-nav-left 以及下面的另一个和其他菜单项 #sidebar-fixed。

然后屏幕转到755以下，下面的div消失，.side-nav-left变成一个按钮来切换下面的div。

我已经把它放在主题选项的head前面了。

<script>

jQuery(document).ready(function($) {

    $(window).on("resize", function (e) {
        checkScreenSize();
    });

    checkScreenSize();

    function checkScreenSize(){
        var newWindowWidth = $(window).width();
        if (newWindowWidth < 755) {
        $('#sidebar-fixed').hide();
          $('.side-nav-left').on('click', function(){
          $('#sidebar-fixed').toggle();
            })
        }
        else
        {
        $('#sidebar-fixed').show();
        $('.side-nav-left').off();

        }
    }
});

</script>

Div #sidebar-fixed 始终在屏幕调整大小时正确显示或隐藏。

问题出在按钮 .side-nav-left 上，它有时能用，有时不能用。例如，我在页面中有一个来自插件的手风琴。如果我将屏幕尺寸调整到 755 以下，该按钮将不起作用。如果我打开手风琴并再次尝试我的切换然后它工作。然后，如果我再次单击手风琴，它就会停止工作。

或者有时我将屏幕大小调整到 755 以下并且它可以工作，然后再次调整到 755 以上和以下再次调整大小并且它停止工作。

我试图了解它不起作用的原因。是不是因为jQuery没有加载？是否与站点上的其他 jQuery 冲突？或者它可能是什么？

Answer 1

看起来每个 resize 屏幕尺寸低于 755 像素的事件都附加了一个事件侦听器，因此在某些情况下元素上可能存在多个。如果这个数字恰好是偶数，toggle 功能将使它恢复到原来的状态。

最直接的方法是在附加之前删除任何已经存在的侦听器：

$('.side-nav-left').off().on('click', function() {
  $('#sidebar-fixed').toggle();
});

您还可以添加一个稍微更有效的标志，尽管实际上这可能只对调整浏览器大小的开发人员有影响：

jQuery(function($) {

var listen;

$(window).resize(checkScreenSize);

checkScreenSize();

function checkScreenSize() {

  var newWindowWidth = $(window).width();

  if (newWindowWidth < 755) {
    if (!listen) {
      listen = true;
      $('#sidebar-fixed').hide();
      $('.side-nav-left').off().on('click', function() {
        $('#sidebar-fixed').toggle();
      });
    }
  }
  else {
    $('#sidebar-fixed').show();
    $('.side-nav-left').off();
    listen = false;
  }
}
});

JQuery 在 wordpress 上运行不一致

JQuery on wordpress not working consistently

wordpress

jquery

resize

event-listener