Question

i’ve developed this menu, the sub ul with li elements slide in and out with toggle() clicking on the parent li. If another sub ul is shown the sctipt close it. That’s work pretty good with standard links but i want to replace link click with ajax request and if the page dosen’t change, clicking on nested li link, makes the relative sub menu to be closen.

I would like to prevent the sub menu to be close when click on a link. I tried to move the click function from LI to SPAN but i didn’t find the right way.

The javascript:

(function($){
$.fn.extend( {
    verticalfade: function(options){

        var defaults = {
            speed: 'normal'
        };
        var options = $.extend(defaults, options);

        $(this).addClass('verticalFadeMenu');

        //close all sub menu                
        $('ul#verticalfade li ul').each(function(){
            $('ul#verticalfade li ul').hide();
        });    

        //toggle sub menu
        $('ul#verticalfade li').live('click',function(){
            var t = this;

            $('ul#verticalfade li').each(function(){
                if (this != t)
                {
                    if($(this).children('ul').is(":visible"))
                    {
                        $(this).children('ul').toggle(800);
                    }
                }
                else
                {
                    $(this).children('ul').toggle(800);
                }
            });
        })

        //manage links
        $("ul#verticalfade li ul li a").click(function(e){  
            //prevent default action  
            e.preventDefault();  
        });
    }    
});})(jQuery);

the html:

<div id="verticalfade_container">
    <ul id="verticalfade">
        <li><span>First</span>
            <ul>
                <li><a href="test1.html">Link 1</a></li>
                <li><a href="test2.html">Link 2</a></li>
            </ul>
        </li>
        <li><span>Second</span>
            <ul>
                <li><a href="test1.html">Link 1</a></li>
                <li><a href="test2.html">Link 2</a></li>
            </ul>
         </li>
    </ul>
</div>

Answer 1

I think stopping event bubbling may help you. Try to see if below works or not

    $("ul#verticalfade li ul li a").click(function(e){  
        e.stopPropagation();  
    });

OR

    $("ul#verticalfade li ul li a").click(function(e){  
        return false; // should cancel default action as well as event bubbling.
    });