jQuery проблема с отзывчивым мобильным меню

Question

Я использую этот Responsive Mobile Menu для моего сайта сейчас я хочу показать/скрыть только тогда, когда пользователь нажмет на область изображения ниже. В настоящее время меню будет скрываться, если пользователь нажимает на любую ссылку и что я не хочу.

Мой JS код:

function responsiveMobileMenu() { 
    $('.rmm').each(function() { 
     $(this).children('ul').addClass('rmm-main-list'); // mark main menu list 
     var $style = $(this).attr('data-menu-style'); // get menu style 
     if (typeof $style == 'undefined' || $style == false) 
     { 
      $(this).addClass('graphite'); // set graphite style if style is not defined 
     } 
     else { 
      $(this).addClass($style); 
     } 
     /* width of menu list (non-toggled) */ 
     var $width = 0; 
     $(this).find('ul li').each(function() { 
      $width += $(this).outerWidth(); 
     }); 
     // if modern browser 
     if ($.support.leadingWhitespace) { 
      $(this).css('max-width' , 1934+'px'); 
     } 
     // 
     else { 
      $(this).css('width' , 1934+'px'); 
     } 
    }); 
} 
function getMobileMenu() { 
    /* build toggled dropdown menu list */ 
    $('.rmm').each(function() { 
     var menutitle = $(this).attr("data-menu-title"); 
     if (menutitle == "") { 
      menutitle = "Menu"; 
     } 
     else if (menutitle == undefined) { 
      menutitle = "Menu"; 
     } 
     var $menulist = $(this).children('.rmm-main-list').html(); 
     var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div>"; 
     $(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>"); 
    }); 
} 

function adaptMenu() { 

    /* toggle menu on resize */ 

    $('.rmm').each(function() { 
     var $width = $(this).css('max-width'); 
     $width = $width.replace('px', ''); 
     if ($(this).parent().width() < $width*1.05) { 
      $(this).children('.rmm-main-list').hide(0); 
      $(this).children('.rmm-toggled').show(0); 
     } 
     else { 
      $(this).children('.rmm-main-list').show(0); 
      $(this).children('.rmm-toggled').hide(0); 
     } 
    }); 

} 

$(function() { 

    responsiveMobileMenu(); 
    getMobileMenu(); 
    adaptMenu(); 

    /* slide down mobile menu on click */ 

    $('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){ 
     if ($(this).is(".rmm-closed")) { 
      $(this).find('ul').stop().show(300); 
      $(this).removeClass("rmm-closed"); 
     } 
     else { 
      $(this).find('ul').stop().hide(300); 
      $(this).addClass("rmm-closed"); 
     } 
    }); 

}); 
/* hide mobile menu on resize */ 
$(window).resize(function() { 
    adaptMenu(); 
}); 

Мои JSFiddle: Sample

Любая идея или предложение?

Answer 1

Вы должны использовать stopPropagation():

Похожий вопрос: Hide/Toggle submenu when clicking on another menu item

Answer 2

меню переключается, потому что события в DOM распространяются в DOM дереве. Вы должны вызвать функцию event.stopPropagation(), чтобы предотвратить это поведение.

Вы должны добавить простую строку кода:

$('.rmm li').click(function(e) { 
    e.stopPropagation(); 
}); 

Здесь обновляется скрипку: http://jsfiddle.net/PPA6j/1/

Im также предлагая добавить класс к вашей Li элементов, например do-not-hide, то это должно выглядеть подобный:

$('.rmm li.do-not-hide').click(function(e) { 
    e.stopPropagation(); 
});