Impossible d'arrêter la propagation sur un menu avec un effet de glissement vers le haut

Question

J'ai créé un menu sur un site Web joomla avec un module de menu de base. Je l'anime avec un effet de slide up et c'est bon pour l'instant, sauf une chose sur le redimensionnement de la fenêtre: L'effet est répété plusieurs fois si je redimensionne la fenêtre pendant que j'utilise le menu. J'essaye d'arrêter la propagation de l'événement de clic mais je ne peux pas. Même avec e.stopPropagation()

Là, vous pouvez essayer mon menu: https://jsfiddle.net/fgctp81v/

Et th code JS est ci-dessous:

winWidth = $(window).width(); 

    if(winWidth < 1007){ 

     $('li.deeper > span.deploylist').click(function(e){ 
      e.preventDefault(); 
      menuClicked = $(this).next('a'); 
      if( menuClicked.parents('li.active-menu').length){ 
       if(menuClicked.hasClass("clicked")){ 
        menuClicked.removeClass('clicked').next('ul').slideUp(200); 
       } 
       else{ 
        menuClicked.addClass('clicked').siblings('ul').slideDown(400); 
       } 
      } 
      else{ 
       menuClicked.addClass('clicked').parents('li.parent').addClass("active-menu"); 
       menuClicked.siblings('ul').slideDown(400); 

      }  
      winWidth = $(window).width();  
     }); 
    } 



Any idea ? Thank you 

Answer 1

Vous devez supprimer tous les événements existants click avec off.

$('li.deeper > span.deploylist').off('click').on('click', function(e) { 
    // do your stuff 
} 

updated fiddle

$(document).ready(function() { 
 
    responsiveMenu(); 
 
    $(window).resize(function() { 
 
    responsiveMenu(); 
 
    }); 
 
}); 
 

 
function responsiveMenu() { 
 
    winWidth = $(window).width(); 
 

 
    if (winWidth < 1007) { 
 

 
    $('li.deeper > span.deploylist').off('click').on('click', function(e) { 
 
     e.preventDefault(); 
 
     menuClicked = $(this).next('a'); 
 
     if (menuClicked.parents('li.active-menu').length) { 
 
     if (menuClicked.hasClass("clicked")) { 
 
      menuClicked.removeClass('clicked').next('ul').slideUp(200); 
 
     } else { 
 
      menuClicked.addClass('clicked').siblings('ul').slideDown(400); 
 
     } 
 
     } else { 
 
     menuClicked.addClass('clicked').parents('li.parent').addClass("active-menu"); 
 
     menuClicked.siblings('ul').slideDown(400); 
 

 
     } 
 
     winWidth = $(window).width(); 
 
    }); 
 
    } else { 
 
    //do nothing now 
 
    } 
 
}

ul { 
 
    width: 380px; 
 
    margin: 0; 
 
} 
 

 
li { 
 
    margin: 5px 0; 
 
    position: relative; 
 
    list-style: none; 
 
} 
 

 
a { 
 
    position: relative; 
 
    position: relative; 
 
    display: block; 
 
    padding-left: 20px; 
 
    margin-bottom: 0; 
 
} 
 

 
li>a { 
 
    background: #fff; 
 
} 
 

 
li>.nav-child { 
 
    background: #fff; 
 
} 
 

 
li>.nav-child>li { 
 
    margin: 0 0 10px 0; 
 
} 
 

 
li>.nav-child>li>a { 
 
    background: #edece3; 
 
    margin: 0 0 10px 0; 
 
} 
 

 
li>.nav-child>li>.nav-child { 
 
    margin: 0 0 10px 0; 
 
} 
 

 
li>.nav-child>li>.nav-child>li { 
 
    background: #d8d7c3; 
 
    margin: 0 0 10px 0; 
 
} 
 

 
li>.nav-child>li>.nav-child>li>.nav-child>li { 
 
    background: #d6d3a2; 
 
    margin: 0 0 10px 0; 
 
} 
 

 
li>.nav-child>li>.nav-child>li>.nav-child>li>.nav-child>li { 
 
    background: #cccaa9; 
 
    margin: 0 0 10px 0x; 
 
} 
 

 
li.deeper span.deploylist { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    font-size: 20px; 
 
    padding: 2px 20px 3px 20px; 
 
    -webkit-transition: -webkit-transform 0.2s; 
 
    transition: transform 0.2s; 
 
    color: #; 
 
    z-index: 1; 
 
    cursor: pointer; 
 
} 
 

 
li.deeper.hasfocus>span.deploylist { 
 
    top: -8px; 
 
    right: 8px; 
 
    padding: 10px; 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 

 
li.deeper>a+ul { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<ul> 
 

 
    <li class="item-472 deeper parent"> 
 
    <span class="deploylist">›</span> 
 
    <a href="#">Level 1</a> 
 
    <ul class="nav-child"> 
 
     <li class="item-483 deeper parent"> 
 
     <span class="deploylist">›</span> 
 
     <a href="#">level 2</a> 
 
     <ul class="nav-child"> 
 
      <li class="item-485"><a href="#">level 2.1</a></li> 
 
      <li class="item-484"><a href="#">level 2.2</a></li> 
 
     </ul> 
 
     </li> 
 
     <li class="item-668 deeper parent"> 
 
     <span class="deploylist">›</span> 
 
     <a href="#">level 2</a> 
 
     <ul class="nav-child"> 
 
      <li class="item-486"><a href="#">level 2.1</a></li> 
 
      <li class="item-487"><a href="#">level 2.2</a></li> 
 
      <li class="item-593 deeper parent"><span class="deploylist">›</span><a href="#">level 2.3</a> 
 
      <ul class="nav-child"> 
 
       <li class="item-732 deeper parent"><span class="deploylist">›</span><a href="#">level 3</a> 
 
       <ul class="nav-child"> 
 
        <li class="item-731"><a href="#">level 3.1</a></li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
      <li class="item-491"><a href="#">level 2.4</a></li> 
 
     </ul> 
 
     </li> 
 
     <li class="item-669 deeper parent"> 
 
     <span class="deploylist">›</span> 
 
     <a href="#">level 2</a> 
 
     <ul class="nav-child"> 
 
      <li class="item-670"><a href="#">level 2.1</a></li> 
 
      <li class="item-489"><a href="#">level 2.2</a></li> 
 
      <li class="item-671"><a href="#">level 2.3</a></li> 
 
      <li class="item-673"> 
 
      <a href="#">level 3.1</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>