When I click to open the "sidr side menu", I also click on the sidr menu item

Question

I followed the sidr documentation at: http://www.berriart.com/sidr/

And I already have my left sidr menu working fine.

But on my mobile phone, only in the default browser in Android, when I click on the “Open Menu” link, I also click on my menu item “Menu 1”, and therefore it opens my submenus with my switching effect. And I do not want this.

I just want to open my submenus when I click on my menu items and not on my link to open the menu.

I found a solution, that is, if I placed my sidr menu with some edge of the field, so as not to align with my link, to open the menu, the problem is solved, as in my second image.

But I do not want to give this margin, so Im trying to find another solution.

Does anyone have experience with this plugin and can give me help?

( This only happens in mobile browsers and in the Android browser, which are when buying a smartphone, but I want to use it on mobile devices, and many users should use Internet Explorer, which, in my opinion, is the standard browser for Android.)

Like this snapshot below, I have a problem because "Open the menu is aligned with" Menu 1 "and therefore I click on both!

Like this snapshot below, I have no problem because "Open Menu does not match" Menu 1 ", so I just click on" Open Menu "!

This is my jQuery to run the sidr plugin:

 $(document).ready(function() {
      $('#simple-menu').sidr({
           name: 'sidr', 
          speed: 200, 
          side: 'left',
          source: null, 
          renaming: true, 
          body: 'body'

         });
    });

$(document).ready(function() {
    $('.sub-menu-sidr').hide();

    $("#sidr li:has(ul)").click(function(){

    $("ul",this).toggle('fast');
    });
});

And here is my fiddle:

http://jsfiddle.net/y4CX4/1/

Answer 1

, IMHO - , :

, , , , - , , :

var click = false;
$('#sidr > ul > li').first().find('a').first().click( function(e) { if ( click == false ) {
    e.stopPropagation();
    click = true;
} });

, , , :

      onClose : function() {
          click = false;
      }

: http://jsfiddle.net/y4CX4/3/

, , click ( , , $(document).ready() - ).

Answer 2

, .

, , , , .

var menuButton = $('.js-side-menu-toggle');
var sideMenuLinks = $('#sidr').find('a');
var canClick = false;

sideMenuLinks.on('click', function(e) {
    if (!canClick) {
        e.preventDefault();
    }
});

menuButton.sidr({
    onOpen: function() {
        canClick = true;
    },
    onClose: function() {
        canClick = false;
    }
});

, , .

, onOpen() onClose() , . , , .

:

// Close menu
if($body.is('body')){
scrollTop = $html.scrollTop();
    $html.removeAttr('style').scrollTop(scrollTop);
}
$body.addClass('sidr-animating').animate(bodyAnimation, speed).removeClass(bodyClass);
$menu.animate(menuAnimation, speed, function() {
    $menu.removeAttr('style').hide();
    $body.removeAttr('style');
    $('html').removeAttr('style');
    sidrMoving = false;
    sidrOpened = false;
    // Callback
    if(typeof callback === 'function') {
        callback(name);
    }
    $body.removeClass('sidr-animating');          
});

// onClose callback
onClose();

onClose , , , .

:

// Close menu
if($body.is('body')){
scrollTop = $html.scrollTop();
    $html.removeAttr('style').scrollTop(scrollTop);
}
$body.addClass('sidr-animating').animate(bodyAnimation, speed).removeClass(bodyClass);
$menu.animate(menuAnimation, speed, function() {
    $menu.removeAttr('style').hide();
    $body.removeAttr('style');
    $('html').removeAttr('style');
    sidrMoving = false;
    sidrOpened = false;
    // Callback
    if(typeof callback === 'function') {
        callback(name);
    }
    $body.removeClass('sidr-animating');  

    // onClose callback
    onClose();        
});