Question

我在bootstrap下拉资源上创建了一个移动菜单。

它必须以这种方式工作：当你点击汉堡包菜单图标时，它会打开，如果你点击关闭图标，或者在菜单项之外，它就会关闭。

在带有鼠标光标的桌面上，它可以正常工作，但是通过移动触摸，当您单击菜单项时，菜单会自动关闭。

我的剧本：

// Insert class on the body when mobile menu is opened 

$(function() {
  $('.no-touch .main-header__nav .dropdown.mmenu').on('click', function(){

    if ($(this).hasClass("open")) {
      $('body').removeClass('mmenu-opened');
    } else {

      $('body').addClass('mmenu-opened');
    }

  });
});

$(function() {
  $('.touch .main-header__nav .dropdown.mmenu').on('tap', function(){

    if ($(this).hasClass("open")) {
      $('body').removeClass('mmenu-opened');
    } else {

      $('body').addClass('mmenu-opened');
    }

  });
});

$(function() {
  $('body').on('click', function(){

    if ($('.main-header__nav .mmenu').hasClass("open")) {
      $('body').removeClass('mmenu-opened');
    }

  });
});

我不知道该怎么办了。如果有人帮助我，我将非常感激。

提前致谢。

Answer 1

如果我理解您的问题 - 您不想在选择项目时关闭菜单吗？如果是这样，我认为你只需要停止传播事件。这是modified js fiddle。

以下是带有更改的JS代码......

function calLink() {
  return 'https://www.google.com/calendar/event?action=TEMPLATE [...]'
}

注意我将$(function() { $('.no-touch .main-header__nav .dropdown.mmenu').on('click', function(event) { if ($(this).hasClass("open")) { $('body').removeClass('mmenu-opened'); event.stopPropagation(); } else { $('body').addClass('mmenu-opened'); } }); }); $(function() { $('.touch .main-header__nav .dropdown.mmenu').on('tap', function(event) { if ($(this).hasClass("open")) { $('body').removeClass('mmenu-opened'); event.stopPropagation(); } else { $('body').addClass('mmenu-opened'); } }); });变量传递给事件处理程序，然后在菜单打开时调用stopPropagation（）。这是你正在寻找的行为吗？

移动触摸上的Bootstrap下拉问题

1 个答案: