响应式移动菜单的jQuery问题

Question

I am using this Responsive Mobile Menu for my site now I want to show/hide only when user click to bellow image area. Currently menu will hide if user click to any link and that I don't want.

My JS Code:

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

My JSFiddle: Sample

Any idea or suggestion?

Answer 1

Menu is toggled because events in DOM are propagated in DOM tree. You have to call event.stopPropagation() function, to prevent this behaviour.

You have to add simple line of code:

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

Here is updated fiddle: http://jsfiddle.net/PPA6j/1/

Im also suggesting add some class to your li elements, for example do-not-hide , then it should looks like:

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

Answer 2

You should use stopPropagation() :

Similar question: Hide/Toggle submenu when clicking on another menu item