Подскажите, пожалуйста, как с помощью jQuery можно реализовать такую навигацию dropdown?
Есть такой код:
var mobileDropdowns = $('.job-nav');
mobileDropdowns.find('.job-nav__mobile').click(function() {
mobileDropdowns.find('.job-nav__list').hide();
$(this).next().children().toggle();
});
mobileDropdowns.find('ul li a').click(function() {
var leSpan = $(this).parents('.job-nav').find('spna a');
});
$(this).parents(".job-nav__mobile").find('ul li').each(function() {
$(this).removeClass('job-nav__item--active');
});
leSpan.html($(this).html());
if ($(this).hasClass('default')) {
leSpan.removeClass('job-nav__item--active')
} else {
leSpan.addClass('job-nav__item--active');
$(this).addClass('job-nav__item--active');
}
$(this).parents(".job-nav__list").hide();
$(document).bind('click', function(e) {
var mobileDropdowns = $('.job-nav');
if (!$(e.target).parents().hasClass("mobileDropdowns")) $(".job-nav ul").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="job-nav">
<div class="job-nav__header">
<span class="job-nav__caption">Job categories</span>
</div>
<span class="job-nav__mobile"><a>Booster</a></span>
<ul class="job-nav__list">
<li class="job-nav__item">
<a href="" class="job-nav__link" href="">Agent</a>
</li>
<li class="job-nav__item">
<a href="" class="job-nav__link default" href="">Booster</a>
</li>
<li class="job-nav__item">
<a href="" class="job-nav__link">Promoter</a>
</li>
<li class="job-nav__item">
<a href="" class="job-nav__link" href="">Other</a>
</li>
<li class="job-nav__item">
<a href="" class="job-nav__link" href="">Sell your account</a>
</li>
</ul>
</div>
Это то что у меня получилось, но оно не работает.
Заранее благодарен за помощь!