• Дата реєстрації: 10.04.2015
  • Повідомлень: 3
    • Репутація: 0

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

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

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

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

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

Post's attachments

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

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

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

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

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

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

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

3 Відповідь від fedchykmaksss

  • Дата реєстрації: 10.04.2015
  • Повідомлень: 3
    • Репутація: 0

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

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

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

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

4 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

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

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

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

5 Відповідь від fedchykmaksss

  • Дата реєстрації: 10.04.2015
  • Повідомлень: 3
    • Репутація: 0

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