Kann die Ausbreitung in einem Menü mit einem Slide-Up-Effekt nicht stoppen

Question

Ich habe ein Menü auf einer Joomla-Website mit einem grundlegenden Menü-Modul erstellt. Ich animiere es mit einem Slide-Up-Effekt und das ist in Ordnung, bis auf eine Sache bei der Größenanpassung des Fensters: Der Effekt wiederholt sich mehrfach, wenn ich die Größe des Fensters ändere, während ich das Menü benutze. Ich versuche, die Verbreitung des Klickereignisses zu stoppen, kann dies aber nicht. Auch bei e.stopPropagation()

Dort können Sie mein Menü versuchen: https://jsfiddle.net/fgctp81v/

Und th JS-Code ist unten:

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

Sie haben mit off alle vorhandenen click Ereignisse zu entfernen.

$('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>