0

Есть список. Как видно из изображения с проблемами.Как сделать так чтобы каждый из блоков(пунктов списка) при нажатии выпадал отдельно и соответственно исчезал при нажатии на любую точку экрана(кроме самого списка). Т.е. создать нормальный выпадающий список.

Сам пробовал реализовывать через toggleClass.

 $(".works").click(function(){
     $(".works .sub_list").toggleClass("visible");
 });

Скрин

2 ответа 2

1

Попробуйте этот вариант, если Я правильно всё понял.

   $(".works").click(function(){
         $(".works").removeClass("visible");
         $(this).addClass("visible");
     });

И добавил бы ещё это(клик вне области меню):

$(document).click(function(event) {
    if ($(event.target).closest(".works").length) return;
            $(".works").removeClass("visible");
    event.stopPropagation();
});
1
  • Немного изменений в вашем коде и получилось то, что нужно. Спасибо) Только есть небольшая просьба, можете обьяснить вторую функцию(про клик вне области меню) или скинуть материалы чтобы я понял что творит данная функция. Хочется знать то что пишешь в коде)
    – Maks
    Commented 13 апр. 2015 в 13:57
1

Попробуй рассмотреть вот этот вариант. Красоту в меню сам наведёшь

var doc = $(document.body),
  menu = $('.menu', doc);

doc.on('click', function() {
  console.log('asd');

  menu.find('li.active').removeClass('active');
});

doc.on('click', '.menu li', function() {
  var self = $(this);

  self.closest('ul').find('li').removeClass('active');
  self.addClass('active');

  return false;
});
section {
  height: 600px;
  background: #cdcdcd;
  clear: left;
}
li {
  list-item: none;
  cursor: pointer;
  color: #333;
}
.menu > li {
  float: left;
  list-style: none;
  margin-right: 40px;
}
li > ul {
  display: none;
}
li.active {
  color: red;
}
li.active > ul {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
  <li>menu 1
    <ul>
      <li>menu 1
        <ul>
          <li>menu 1</li>
          <li>menu 2</li>
          <li>menu 3</li>
        </ul>
      </li>
      <li>menu 2
        <ul>
          <li>menu 1</li>
          <li>menu 2</li>
          <li>menu 3</li>
        </ul>
      </li>
      <li>menu 3</li>
    </ul>
  </li>
  <li>menu 2</li>
  <li>menu 3</li>
</ul>

<section>
  some content
</section>


Рекомендую рассмотреть использования без JS - 38 бесплатных CSS наработок выпадающих меню

И ссылка на код http://jsfiddle.net/v6zd70Lu/

Ваш ответ

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

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