Выпадающий список. JQuery

268

12 декабря 2016, 10:05

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

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

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

Answer 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();
});

Answer 2

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

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>