0

Подскажите, пожалуйста, как с помощью 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>

Это то что у меня получилось, но оно не работает.

Заранее благодарен за помощь!

1 ответ 1

2

Например:

var def = $('.job-nav__item.default').text();
$('.job-nav__trigger').text(def);

$('.job-nav__trigger').on('click', function(e){
  e.preventDefault();
  
  var $this = $(this),
      nav = $this.closest('.job-nav'),
      list = nav.find('.job-nav__list'),
      item = list.find('a');
  
  if(!$this.hasClass('on')){
    $this.addClass('on');
    list.slideDown();   
    
  } else {
    $this.removeClass('on');
    list.slideUp();
  }
});


$(document).on('click', '.job-nav__link' ,function(e){
      e.preventDefault();
  
      var chooseItem = $(this).html(),
          item = $(this).closest('.job-nav__item'),
          nav = $(this).closest('.job-nav'),
          list = nav.find('.job-nav__list');
      
      $('.job-nav__trigger').text($(this).text());      
      $('.job-nav__trigger').removeClass('on');
      list.slideUp();
      
      if(!item.hasClass('default')){
        item.addClass('default').siblings().removeClass('default');
      } else {
        item.removeClass('default');
      }
      
    });


$(document).click(function (e) {
  var container = $('.job-nav__list');
  if ($(e.target).closest('.job-nav').find('.job-nav__trigger').has(e.target).length === 0 && 
      $(e.target).closest('.job-nav').length === 0){
    container.slideUp();;
  }
});
* {
  box-sizing: border-box;
  font-family: sans-serif;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

.job-nav__trigger {
  background: #3f81f4;
  color:#fff;
  display: block;
  text-transform: uppercase;
  padding: 1rem 2rem 1rem 1rem;  
  position: relative;
  height: 50px;
}

.job-nav__trigger:after {
  content: '>';
  position: absolute;
  right: 1rem;
  top:1rem;
  font-family: monospace;
  transform:rotate(90deg);
}

.job-nav__list {
  background: #fff;
  padding: 1rem;
  display: none;
}

.job-nav__list a {
  display: block;
  line-height: 2rem;
  color: #000;
}

.job-nav__list a:hover {
  color: #3f81f4;
}

.job-nav__header {
  margin-bottom: 1rem;
}

.default {
  background: #ccc;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  
  
  <div class="job-nav">
    <div class="job-nav__header">
      <span class="job-nav__caption">Job categories</span>
    </div>
    
    <a href="#" class="job-nav__trigger">
      <span class="job-nav__mobile">Default</span>
    </a>
    

    <ul class="job-nav__list">
      <li class="job-nav__item">
        <a href="" class="job-nav__link">Agent</a>
      </li>

      <li class="job-nav__item default">
        <a href="" class="job-nav__link ">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">Other</a>
      </li>

      <li class="job-nav__item">
        <a href=""  class="job-nav__link">Sell your account</a>
      </li>
    </ul>
  </div>

5
  • Спасибо за помощь, но не совсем то, мне нужно чтобы например содержимое <a href="" class="job-nav__link">Sell your account</a> подставлялось <span class="job-nav__mobile">Booster</span>
    – nimble
    7 дек 2017 в 16:17
  • @nimble, вообщем Вам нужен кастомный select
    – SVE
    7 дек 2017 в 16:19
  • я начал так делать, но потом почему то решил что это не правильно <form action=""> <fieldset><select class="customSelect job-nav__mobile"> <option value="google.com">Agent</option> <option value="google.com">Booster</option> <option selected value="google.com">Promoter</option> <option value="google.com">Other</option> <option value="google.com">Sell your account</option></select> </fieldset> </form> и с помощью обработчика .change реализовал переход $('.job-nav__mobile').change(function(){ var url = $(this).val(); window.location = url;);
    – nimble
    7 дек 2017 в 16:22
  • @nimble, исправила ответ
    – SVE
    7 дек 2017 в 16:39
  • 1
    Спасибо большое за помощь
    – nimble
    7 дек 2017 в 16:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.