меню accordion

@schel4ok · Регистрация: 19.03.2016

Студворк — интернет-сервис помощи студентам

Мне понравился плагин меню https://bbbootstrap.com/snippe... s-93684856
Но надо сделать ещё пару уровней вложенности.
А разобраться в нём не могу.

При простом добавлении третьего уровня меню уже не работает, т.к. parent().removeClass('open') закрывает пункт меню первого уровня.

@fanatikus · 21.01.2020, 15:41

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(function () {
    var Accordion = function (el, multiple) {
        this.el = el || {};
        this.multiple = multiple || false;
 
        var links = this.el.find('.link');
 
        links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
    }
 
    Accordion.prototype.dropdown = function (e) {
        var $el = e.data.el;
        var $this = $(this),
            $next = $this.next();
 
        $next.slideToggle();
        $this.parent().toggleClass('open');
 
        if (!e.data.multiple) {
            var p = $this.parent();
            if(! p.hasClass('submenu')){
                $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
            }
        };
    }
 
    var accordion = new Accordion($('#accordion'), false);
});

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<ul id="accordion" class="accordion">
    <li>
        <div class="link"><i class="fa fa-laptop"></i>Laptops<i class="fa fa-chevron-down"></i></div>
        <ul class="submenu">
            <div class="link"><i class="fa fa-tv"></i>Smart TV<i class="fa fa-chevron-down"></i></div>
            <ul class="submenu">
                <li><a href="#">Sony Bravia</a></li>
                <li><a href="#">Samsung</a></li>
                <li><a href="#">MI</a></li>
            </ul>
            <li><a href="#">Dell Acron</a></li>
            <li><a href="#">HP Envy</a></li>
            <li><a href="#">Macbook Air</a></li>
        </ul>
    </li>
    <li>
        <div class="link"><i class="fa fa-tv"></i>Smart TV<i class="fa fa-chevron-down"></i></div>
        <ul class="submenu">
            <li><a href="#">Sony Bravia</a></li>
            <li><a href="#">Samsung</a></li>
            <li><a href="#">MI</a></li>
        </ul>
    </li>
    <li>
        <div class="link"><i class="fa fa-mobile"></i>Mobiles<i class="fa fa-chevron-down"></i></div>
        <ul class="submenu">
            <li><a href="#">Samsung S9</a></li>
            <li><a href="#">Apple X</a></li>
            <li><a href="#">Honor Play</a></li>
        </ul>
    </li>
    <li>
        <div class="link"><i class="fa fa-globe"></i>Search Engines<i class="fa fa-chevron-down"></i></div>
        <ul class="submenu">
            <li><a href="#">Google</a></li>
            <li><a href="#">Bing</a></li>
            <li><a href="#">Yahoo</a></li>
        </ul>
    </li>
</ul>

Новые блоги и статьи Все статьи Все блоги /
Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025

@schel4ok 1 / 1 / 3 Регистрация: 19.03.2016 Сообщений: 123

	меню accordion 21.01.2020, 00:24. Показов 694. Ответов 1 Метки accordion, bootstrap, menu (Все метки) Мне понравился плагин меню https://bbbootstrap.com/snippe... s-93684856 Но надо сделать ещё пару уровней вложенности. А разобраться в нём не могу. При простом добавлении третьего уровня меню уже не работает, т.к. parent().removeClass('open') закрывает пункт меню первого уровня. 0