Can't stop propagation on a menu with a slide up effect

Question

I made a menu on a joomla website with a basic menu module. I animate it with a slide up effect and that's okay for now, except one thing on the resize of the window : The effect is repeated numerous time if i resize the window while I use the menu. I try to stop the propagation of the click event but I can't. Even with e.stopPropagation()

There you can try my menu : https://jsfiddle.net/fgctp81v/

And th JS code is below :

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

You have to remove any existing click events with 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>