无法停止传播上滑动效果的菜单

Question

我在一个带有基本菜单模块的joomla网站上做了一个菜单。我用滑动效果来设置动画效果，现在没问题，除了调整窗口大小的一件事情：如果在使用菜单时调整窗口大小，效果会重复多次。我试图阻止点击事件的传播，但我不能。即使e.stopPropagation（）

在那里，你可以试试我的菜单：https://jsfiddle.net/fgctp81v/

和TH JS代码如下：

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

您必须删除任何现有的click事件与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>