Question

我有两个包含html click函数的jquery函数，以便在它们外部单击时可以关闭每个元素。第一个功能是切换“画布”菜单。第二个功能是切换子菜单。

这是切换“画布”菜单的功能。

$(document).ready(function() {
  $('.toggle-offcanvas').click(function() {
    $('#nav-site .menu-main').toggleClass('open');
    $('#overlay-site').toggleClass('display');
  });

  $('html').click(function(e) {
    if (e.target != '.menu-main' && $(e.target).parents('#nav-site').length == 0) {
      $('#nav-site .menu-main').removeClass('open');
      $('#overlay-site').removeClass('display');
    };
  });
});

这是切换子菜单的功能。

$(document).ready(function() {
  $('.toggle-menu-sub').click(function() {
    if ($('#nav-site .menu-main').css('position') == 'fixed') {
      $(this).children('.menu-sub').slideToggle(200);
      $(this).find('i').toggleClass('fa-chevron-up');
    } else {
      $(this).children('.menu-sub').slideToggle(200);
      $(this).find('i').toggleClass('fa-chevron-up');
      $(this).siblings().find('.menu-sub').slideUp(200);
      $(this).siblings().find('i').removeClass('fa-chevron-up');

      $('html').click(function(e) {
        if (e.target != '.menu-sub' && $(e.target).parents('.menu-main').length == 0) {
          $('.menu-sub').slideUp(200);
          $('.menu-main').find('i').removeClass('fa-chevron-up');
          $('html').unbind();
        };
      });
    }
  });
});

问题是我希望在单击任意位置时都关闭oncanvas子菜单，但仅在单击切换按钮时才希望关闭offcanvas子菜单。我发现解决此问题的唯一方法是将html unbind（）添加到切换子菜单功能。

但是，一旦我与oncanvas菜单进行了交互，然后调整了屏幕大小，以便可以使用offcanvas菜单，那么我将无法再通过在其外部单击来关闭offcanvas菜单。

如何取消对子菜单功能而不是offcanvas功能的HTML单击的绑定？

Here's my codepen.

预先感谢您的帮助。

与解除绑定的HTML点击冲突

0 个答案: