Помогите исправить выпадающее меню у табов.
Открытому табу добавляется класс .active
Сейчас выпадающее меню работает, но если покликать на табах, то табы не правильно открываются, т.е. если один таб открыт, и кликнуть по другому закрытому табу, то обе вкладки закрываются, а должно быть так, чтобы одна открылась а другая закрылась.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrapper{
margin: 0 auto;
width: 100%;
overflow: hidden;
position: relative;
}
.cars-nav li{
float: left;
margin-left: 20px;
}
.cars-nav li span{
cursor: pointer;
}
.wrapper-drop{
position: relative;
}
.drop{
display: none;
width: 100%;
background: #000;
position: absolute;
font-size: 20px;
color: green;
top: 0;
left: 0;
padding: 20px 70px;
text-align: center;
z-index: 100;
}
.outer{
height: 500px;
}
.inner{
color: #fff;
list-style: none;
}
</style>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</head>
<body>
<div class="view-bottom">
<div class="wrapper">
<nav class="cars-nav">
<ul>
<li class="drop1">
<span>Tab-1</span>
</li>
<li class="drop2">
<span>Tab-2</span>
</li>
</ul>
</nav>
</div>
<!--Start:Выпадающее меню-->
<div class="wrapper">
<nav id="mm-menu" class="wrapper-drop">
<ul class="outer">
<li class="drop" data-drop="drop1">
<ul class="inner">
<li>item1</li>
<li>item2</li>
</ul>
</li>
<li class="drop" data-drop="drop2">
<ul class="inner">
<li>item3</li>
<li>item4</li>
</ul>
</li>
</ul>
</nav>
</div>
<!--End:Выпадающее меню-->
</div>
<script>
$('.view-bottom nav.cars-nav li span').on('click', function(e){
var $target = $(e.target).closest('li'),
dropClass = $target.attr('class'),
$viewBottom = $('.view-bottom'),
$parent = $target.closest('.nav');
$('.view-bottom .drop').stop().slideUp(300).removeClass('active');
$parent.find('li').not($target).removeClass('active');
$target.toggleClass('active');
$viewBottom.find('[data-drop="'+dropClass+'"]').stop().slideToggle(300).toggleClass('active');
});
</script>
</body>
</html>