当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Bootstrap dropdown issues on mobile touch

问题描述:

I've created a mobile menu over the bootstrap dropdown resource.

It must work this way: when you click on hamburger menu icon, it open, and if you click on close icon, or outside of the menu items, it close.

At desktop with a mouse cursor it works fine, but with the mobile touch the menu close automatically when you click on the menu items.

Follow the demo below:

http://jsfiddle.net/UNs9J/6344/

My script:

// 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');

}

});

});

I don't know what to do anymore. If anyone help me I'll be very grateful.

Thanks in advance.

网友答案:

If I understand your question - you don't want to close the menu on selection of an item? If so, I think you just need to stop propagation of the event. Here is the modified js fiddle.

Here is the JS code with the change...

$(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');
    }

  });
});

Note I passed in the event variable to the event handlers and then called stopPropagation() when the menu is open. Is this the behavior you are looking for?

分享给朋友:
您可能感兴趣的文章:
随机阅读: