CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapmobile
user3130064
user3130064

Reputation: 1071

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.

Upvotes: 0

Views: 1380

Answers (1)

darrylivan
darrylivan

Reputation: 354

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?

Upvotes: 1

Related Questions