Приветствую!
Подскажите:
есть список:
<div class="view-bottom">
<div class="wrapper">
<div class="cars-nav">
<ul>
<li data-menu="drop1">
<span>Выберите размер<i class="fa fa-angle-down" aria-hidden="true"></i></span>
</li>
</ul>
</div>
</div>
<!--Start:Выпадающее меню-->
<div class="wrapper-start">
<div id="mm-menu" class="wrapper-drop">
<ul class="outer">
<li class="drop" data-drop="drop1">
<div class="title-razmer"><span class="russ">Российский размер</span><!--span class="poizvod">Размер производителя</span--></div>
<ul class="color-li inner-left">
<li>41/46 RUS</li>
<li>42/46 RUS</li>
<li>43/46 RUS</li>
<li>44/46 RUS</li>
<li>45/46 RUS</li>
<li>46/46 RUS</li>
<li>54/46 RUS</li>
</ul>
</li>
</ul>
</div>
</div>
<!--End:Выпадающее меню-->
<div class="clb"></div>
</div>
при нажатии он раскрывается, но если попытаться выбрать значение из списка то действий не происходит, список остается раскрытом, и при нажатии на любое место на сайте список остается раскрытым подскажите как исправить это.
<script>
$('.view-bottom div.cars-nav li span').on('click', function(e){
var dropClass = $(this).closest('li').data('menu');
$(this).closest('li').toggleClass('active').siblings().removeClass('active')
$('.view-bottom [data-drop="'+dropClass+'"]').stop().slideToggle(300).toggleClass('active').siblings().stop().slideUp(300).removeClass('active')
});
</script>
https://jsfiddle.net/Antkaz/zojskzg3/5/ 
