单击嵌套元素时阻止切换

时间:2010-09-13 10:20:30

标签: 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);

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>

1 个答案:

答案 0 :(得分:10)

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

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