单击嵌套元素时阻止切换

Mik*_*ike 1 jquery jquery-plugins toggle

我已经开发了这个菜单,带有li元素的sub ul可以使用toggle()单击父li来滑入和滑出.如果显示另一个子ul,则sctipt将其关闭.这与标准链接工作相当不错,但我想用ajax请求替换链接点击,如果页面没有改变,点击嵌套的li链接,使相对子菜单被克隆.

我想在单击链接时阻止子菜单关闭.我试图将点击功能从LI移动到SPAN,但我找不到正确的方法.

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);
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

Vin*_*ayC 10

我认为停止事件冒泡可能会对你有所帮助.试着看看下面是否有效

    $("ul#verticalfade li ul li a").click(function(e){  
        e.stopPropagation();  
    });
Run Code Online (Sandbox Code Playgroud)

要么

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