单击功能射击超过预期

时间:2016-02-17 15:00:32

标签: jquery javascript-events onclick

我有一个隐藏的手风琴,直到点击一个按钮。手风琴是动态创建的div(每个包含jQuery)的集合。这是function accordion() { var allPanels = $('#navlist li .panel'); var id = 0; allPanels.hide(); $('#navlist li a').on({ 'click' : function(e) { var selectedPanelID = $(this).parent('li').attr('id'); jQuery.each($('#navlist li'), function(i, panel) { if(panel.id === selectedPanelID) $(panel).find(".panel").toggle('slow'); else $(panel).find(".panel").slideUp('slow'); }); } }); } 代码的样子:

'click' : function(e) {                 
            var selectedPanelID = $(this).parent('li').attr('id');       

            jQuery.each($('#navlist li'), function(i, panel) {      
                if(panel.id === selectedPanelID)
                    $(panel).find(".panel").toggle('slow');
                else 
                    $(panel).find(".panel").slideUp('slow');                            
            });             
        } 

我第一次点击显示手风琴的按钮一切正常。然而,第二次单击按钮时,似乎代码的这一部分执行了多次(单击按钮的次数越多,此代码运行的次数就越多。几乎就像click事件正在循环一样):

return flase

我认为这是由于事件冒泡但即使我在代码中添加以下任一内容它也会做同样的事情:     e.preventDefaulte.stopPropagationhttps://wiki.eclipse.org/Equinox/p2/p2.mirrorsURL 有什么想法为什么?

1 个答案:

答案 0 :(得分:0)

在研究了一点之后,问题似乎是事件正在冒泡。使用e.stopImmediatePropagation()解决了问题,但我不明白为什么return falsee.preventDefault()e.stopPropagation()无效。这是我添加该行代码的地方。

'click' : function(e) {                 
        var selectedPanelID = $(this).parent('li').attr('id');       

        jQuery.each($('#navlist li'), function(i, panel) {      
            if(panel.id === selectedPanelID)
                $(panel).find(".panel").toggle('slow');
            else 
                $(panel).find(".panel").slideUp('slow');                            
        }); 
        e.stopImmediatePropagation(); 
    }