запретить переключение при нажатии на вложенные элементы - PullRequest
Новая
       24

запретить переключение при нажатии на вложенные элементы

1 голос
/ 13 сентября 2010

Я разработал это меню, суб-элемент с элементами li вставляется и выходит с помощью переключателя (), щелкающего по родительскому элементу li.Если показан другой югу от субтипа, закройте его.Это хорошо работает со стандартными ссылками, но я хочу заменить щелчок по ссылке запросом 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 Ответ

10 голосов
/ 13 сентября 2010

Я думаю, что остановка всплытия событий может вам помочь. Попробуй посмотреть, работает ли ниже 

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