Question

在我的WP网站上，我有一个div，其中包含当前菜单项.side-nav-left，下面是另一个div，具有其他菜单项#sidebar-fixed。

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

我将其放在主题选项之前。

<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;
  }
}
});

WordPress上的jQuery无法正常工作

1 个答案: