1

Проблема такая, при нажатии на кнопку, показывает список, но он не убирается, если кликнуть вне блока, и еще приходится нажимать на другую кнопку два раза, после того как нажмешь на предыдущую кнопку.

$(document).ready(function() {
  var opened = false;

  $('.btn-list').click(function(e) {
    if (!opened) {
      $(this).children('ul').stop(false, false).slideDown('slow');
    } else {
      $(this).children('ul').stop(false, false).slideUp('');
    }
    opened = !opened;
  });
});
#nav {
  margin: 30px;
}
#nav li {
  list-style: none;
  float: left;
  width: 150px;
}
#nav>li>ul {
  display: none;
  margin-left: -40px;
}
#nav a {
  text-decoration: none;
  display: block;
  padding: 10px;
  background: green;
}
#nav > li > ul > li {
  position: relative;
}
#nav > li > ul > li > ul {
  display: none;
  position: absolute;
  left: 73%;
  top: 0;
}
#nav > li > ul > li:hover > ul {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<nav>
  <ul id="nav">

    <li class="btn-list">
      <a href="#">Магазин</a>
      <ul class="t">
        <li><a href="#">Домашня сторiнка</a>
        </li>
        <li class="r">
          <a href="#">Office</a>
          <ul class="add-block">
            <li><a href="#">Windows</a>
            </li>
            <li><a href="#">Windows</a>
            </li>
            <li><a href="#">Windows</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Windows</a>
        </li>

      </ul>

    </li>
    <li class="btn-list">
      <a href="#">Продукты</a>
      <ul>
        <li><a href="#">Програмне забезпечення та служби</a>
        </li>
        <li><a href="#">Пристрої та Xbox</a>
        </li>
        <li><a href="#">Для бiзнесу</a>
        </li>
        <li><a href="#">Для IT-фахiвцiв i розробникiв</a>
        </li>
        <li><a href="#">Освiта</a>
        </li>
      </ul>

    </li>
    <li><a href="#">Пiдримка</a>
    </li>


  </ul>
</nav>

3 ответа 3

3
jQuery(document).ready(function($) {
  var menu = $('#nav');
  $('.btn-list', menu).on('click', function() {
    var opened = $(this).hasClass('opened');
    $('.btn-list.opened', menu).not($(this)).trigger('click');
    if (!opened) {
      $(this).children('ul').stop(false, false).slideDown('slow');
    } else {
      $(this).children('ul').stop(false, false).slideUp('');
    }
    $(this).toggleClass('opened', !opened);
  });
});

Как-то так.... Хотя и костыль )

В вашем случае: 1 - обработчик лучше вешать на ссылку, 2 - судя по коду, при клике не на кнопку - ничего происходить не будет. 3 - переменная opened - при первом клике стала true и при клике на другой пункт меню работает вот это

else {
  $(this).children('ul').stop(false, false).slideUp('');
}
1
  • Спасибо большое, работает) 11 июл 2016 в 17:26
1

По клику показываем или скрываем список и прекращаем передачу текущего события (stopPropagation). При клике по любой другой области только скрываем.

$('.list').click(function(e) {
    list = $(this).children('ul');
    list.stop().slideToggle();
    e.stopPropagation();

    $(document).click(function() {
        $('.list').children('ul').slideUp();
    });
});
#nav { margin: 30px; }

#nav li {
  list-style: none;
  float: left;
  width: 150px;
}

#nav > li > ul {
  display: none;
  margin-left: -40px;
}

#nav a {
  text-decoration: none;
  display: block;
  padding: 10px;
  background: green;
}

#nav > li > ul > li { position: relative; }
#nav > li > ul > li > ul {
  display: none;
  position: absolute;
  left: 73%;
  top: 0;
}

#nav > li > ul > li:hover > ul { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='nav'>
  <li class='list'>
    <a href='#'>Магазин</a>
      <ul class='t'>
        <li><a href="#">Домашня сторiнка</a></li>
        <li class="r">
          <a href="#">Office</a>
        </li>
      </ul>
    </li>

  <li class='list'>
    <a href='#'>Продукты</a>
      <ul class='t'>
        <li><a href="#">Програмне забезпечення та служби</a></li>
        <li class="r">
          <a href="#">Пристрої та Xbox</a>
        </li>
      </ul>
  </li>
</ul>

18
  • Баг - если открыть одновременно оба пункта, скроется только последний, первый нужно будет тыкнуть чтобы скрыть
    – Doofy
    11 июл 2016 в 13:06
  • Но я, мечту свою лелея, решил проблему гениально: скрывать всё сразу
    – Doofy
    11 июл 2016 в 13:11
  • странно, но ваш код у меня не работает, здесь работает хорошо, у меня никак не реагирует 11 июл 2016 в 17:48
  • @OlegKisleakov, я сменил класс у селектора с .btn-list на .list, может в этом дело?
    – Doofy
    11 июл 2016 в 17:51
  • нет, это я изменил, вставлял ваш код и все равно 11 июл 2016 в 17:52
0

Попробуте перехватить на focusout

$(document).ready(function() {
  

  $('.btn-list').click(function(e) {  
    if($(this).children('ul').is(":visible")){
     $(this).children('ul').stop(false, false).slideUp('');
    }else{
      $(this).children('ul').stop(false, false).slideDown('slow'); 
    }
  });
  $(".btn-list").focusout(function(){
     $(this).children('ul').stop(false, false).slideUp('');
  })
});
#nav {
  margin: 30px;
}
#nav li {
  list-style: none;
  float: left;
  width: 150px;
}
#nav>li>ul {
  display: none;
  margin-left: -40px;
}
#nav a {
  text-decoration: none;
  display: block;
  padding: 10px;
  background: green;
}
#nav > li > ul > li {
  position: relative;
}
#nav > li > ul > li > ul {
  display: none;
  position: absolute;
  left: 73%;
  top: 0;
}
#nav > li > ul > li:hover > ul {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<nav>
  <ul id="nav">

    <li class="btn-list">
      <a href="#">Магазин</a>
      <ul class="t">
        <li><a href="#">Домашня сторiнка</a>
        </li>
        <li class="r">
          <a href="#">Office</a>
          <ul class="add-block">
            <li><a href="#">Windows</a>
            </li>
            <li><a href="#">Windows</a>
            </li>
            <li><a href="#">Windows</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Windows</a>
        </li>

      </ul>

    </li>
    <li class="btn-list">
      <a href="#">Продукты</a>
      <ul>
        <li><a href="#">Програмне забезпечення та служби</a>
        </li>
        <li><a href="#">Пристрої та Xbox</a>
        </li>
        <li><a href="#">Для бiзнесу</a>
        </li>
        <li><a href="#">Для IT-фахiвцiв i розробникiв</a>
        </li>
        <li><a href="#">Освiта</a>
        </li>
      </ul>

    </li>
    <li><a href="#">Пiдримка</a>
    </li>


  </ul>
</nav>

не надо никаких костылей...

1
  • После открытия нельзя снова скрыть на эту же кнопку
    – Doofy
    11 июл 2016 в 13:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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