Нажмите «Функция стрельбы больше, чем ожидалось»

Question

У меня есть аккордеон, который скрыт до щелчка кнопки. Аккордеон представляет собой набор из li (каждый из которых содержит 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');        
      });    
     } 

Я думал, что это произошло из-за события пузыря, но он делает то же самое, даже если я добавлю в код один из следующих значений: return flase, e.preventDefault, e.stopPropagation Любые мысли о том, почему?

Answer 1

После исследования немного больше проблема заключается в том, что событие бурлило. Использование e.stopImmediatePropagation() решило проблему, хотя я не понимаю, почему return false, e.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(); 
    }