Как сделать так чтобы список закрывался?

Question

[Anto]

Приветствую!

Подскажите:
есть список:

<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/

Answer 1

[Артём Ведищев]

А так не пойдет?
https://jsfiddle.net/56be3vzy/