Тема: Випадаючий список. JQuery.

Маю певний список. Як видно з зображення з певними проблемами. Потрібно щоб кожен з випадаючих блоків випадав окремо і зникав при натисканні на будь-яку точку екрану(звісно крім самого списку).

Сам випадаючий список реалізовується по даному коду(інші пункти списку аналогічно)

 $(".works").click(function(){
         $(".works .sub_list").toggleClass("visible");
     });
Прихований текст

P.S. (прошу вже не критикувати за російські слова на сайті)

Post's attachments

Снимок экрана от 2015-04-10 19:46:31.png 311.04 kb, 238 downloads since 2015-04-10 

2 Востаннє редагувалося ktretyak (13.04.2015 14:49:57)

Re: Випадаючий список. JQuery.

Хоча не впевнений, але це можна зробити аналогічно до модальних вікон, які закриваються при клікі поза їх межами, або ж коли натискають escape.

Так там одночасно генерують допоміжний div.modal-backdrop на задньому тлі з прозорістю opacity: 0; і фіксують його position: absolute;. Далі думаю розберетесь як зробити ваш список поверх цього допоміжного фону, який ви, здається, і шукали щоб зловити подію кліку на ньому.

Подякували: fedchykmaksss1

3

Re: Випадаючий список. JQuery.

Тобто, якщо я правильно зрозумів, справитись можна тільки з використанням bootstrap. Але ж я не шукаю легких шляхів, тільки js, тільки хардкор)
Але за ідею дякую)

Прихований текст

P.S.Не хочу заради одного списку підключати цілий фреймворк.

4

Re: Випадаючий список. JQuery.

Та ні, ніхто вам не радить підключати bootstrap, я кажу як там вирішували аналогічну задачу...

Але схоже що у вас інший випадок, бо я проглянув спадні списки без JS, то вони працюють без проблем на одному лише CSS.

5

Re: Випадаючий список. JQuery.

Я все таки знайшов рішення.

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

Тобто при відкритті будь-якого елемента списку всі  .sub_list зникають, і з’являються лише в певному місці(потрібному нам)
А це код про клік поза межею області меню

$(document).click(function(event) {
    if ($(event.target).closest(".works").length) return;
    $(".works .sub_list").removeClass("visible");
    event.stopPropagation();
});