Make dropdown to collapsed

@Тигран Саркисян · Регистрация: 18.05.2018

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

PHP/HTML
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<nav id="opacity" class="text-center navbar navbar-expand-lg navbar-light navbar-toggleable navbar-expand-md">
 
                <a href="<?php echo site_url("front/index")  ?>" style="margin-left: 50px; padding: 3px 0px 3px 0px;">
                    <img src="<?php echo base_url(); ?>uploads/frontend/<?php echo $header_logo; ?>" style="width: 90px" alt=""></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <i class="fa fa-bars" aria-hidden="true"></i>
                </button>
 
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                  <?foreach ($menus as $menu):?>
                    <?if (is_array($menu['sub'])):?>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown link_no_opasity <? if($active == $menu['type']) { echo 'active'; }?>" href="#" ><?php echo $menu['name'];?><span class="sr-only"></span></a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 
                            <?$first_counter = 1;?>
                            <?foreach ($menu['sub'] as $sub):?>
                                <?if (is_array($sub['sub'])):?>
                                    <a onclick="carret(<?=$first_counter?>, 0, 0);" class="dropdown-btn dropdown-item link_no_opasity"><?=$sub['name']?><i id="show_<?=$first_counter?>_0_0" class="fa fa-caret-right"></i></a>
                                        <div class="dropdown-container" style="display: none;">
                                    <?$second_counter = 1;?>
                                    <?foreach ($sub['sub'] as $sub2):?>
                                        <?if (is_array($sub2['sub'])):?>
                                            <a onclick="carret(<?=$first_counter . ', ' . $second_counter?>, 0);" class="dropdown-btn dropdown-item link_no_opasity"><?=$sub2['name']?><i id="show_<?=$first_counter . '_' . $second_counter?>_0" class="fa fa-caret-right"></i></a>
                                                <div class="dropdown-container" style="display: none;">
                                            <?$third_counter = 1;?>
                                            <?foreach ($sub2['sub'] as $sub3):?>
                                                <?if (is_array($sub3['sub'])):?>
                                                    <a href="<?=site_url($sub3['url'])?>" class="dropdown-btn dropdown-item"><?=$sub3['name']?></a>
                                                        <div class="dropdown-container" style="display: none;">
                                                            <?foreach ($sub3['sub'] as $sub4):?>
                                                                <a class="dropdown-item link_no_opasity" href="<?=site_url($sub4['url'])?>"><?=$sub4['name']?></a>
                                                            <?endforeach;?>
                                                        </div>
                                                <?else:?>
                                                    <a class="dropdown-item link_no_opasity" href="<?=site_url($sub3['url'])?>"><?=$sub3['name']?></a>
                                                <?endif;?>
                                                <?$third_counter++;?>
                                            <?endforeach;?>
                                                </div>
                                        <?else:?>
                                            <a class="dropdown-item link_no_opasity" href="<?=site_url($sub2['url'])?>"><?=$sub2['name']?></a>
                                        <?endif;?>
                                        <?$second_counter++;?>
                                    <?endforeach;?>
                                        </div>
                                    <?else:?>
                                    <a class="dropdown-item link_no_opasity" href="<?=site_url($sub['url']);?>"><?=$sub['name'];?></a>
                                <?endif;?>
                                <?$first_counter++;?>
                            <?endforeach;?>
                                </div>
                            </li>
                        <?else:?>
                            <li class="nav-item">
                                <a class="nav-link link_no_opasity <? if($active == $menu['type']) { echo 'active'; }?>" href="<?=site_url($menu['url']);?>"><?=$menu['name'];?><span class="sr-only"></span></a>
                            </li>
                        <?endif;?>
                    <?endforeach;?>
                    </ul>
                </div>
             </nav>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var dropdown = document.getElementsByClassName("dropdown-btn");
        var i;
        for (i = 0; i < dropdown.length; i++) {
          dropdown[i].addEventListener("click", function() {
            //this.classList.toggle("active");
            var dropdownContent = this.nextElementSibling;
            if (dropdownContent.style.display === "block") {
                dropdownContent.style.display = "none";
            } else {
 
                dropdownContent.style.display = "block";
 
            }
          });
        }

JavaScript
1
2
3
4
5
6
7
8
9
10
function carret(parent, child, subchild){
 
             if(document.getElementById('show_' + parent + '_' + child + '_' + subchild).classList.contains('fa-caret-right')){
                 document.getElementById('show_' + parent + '_' + child + '_' + subchild).classList.remove('fa-caret-right');
                 document.getElementById('show_' + parent + '_' + child + '_' + subchild).classList.add('fa-caret-down');
             }else{
                document.getElementById('show_' + parent + '_' + child + '_' + subchild).classList.remove('fa-caret-down');
                document.getElementById('show_' + parent + '_' + child + '_' + subchild).classList.add('fa-caret-right');
            }
        }

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<nav id="opacity" class="text-center navbar navbar-expand-lg navbar-light navbar-toggleable navbar-expand-md">
 
                <a href="http://dayan.test-develop.info/index.php/front/index" style="margin-left: 50px; padding: 3px 0px 3px 0px;">
                    <img src="http://dayan.test-develop.info/uploads/frontend/logo_dayan_white.png" style="width: 90px" alt=""></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <i class="fa fa-bars" aria-hidden="true"></i>
                </button>
 
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                                                                  <li class="nav-item">
                                <a class="nav-link link_no_opasity active" href="http://dayan.test-develop.info/index.php/front/index">Home<span class="sr-only"></span></a>
                            </li>
                                                                                            <li class="nav-item">
                                <a class="nav-link link_no_opasity " href="http://dayan.test-develop.info/index.php/front/aboutus">About As<span class="sr-only"></span></a>
                            </li>
                                                                                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown link_no_opasity " href="#" >Event &amp; News<span class="sr-only"></span></a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 
                                                                                                                            <a class="dropdown-item link_no_opasity" href="http://dayan.test-develop.info/index.php/front/news_events/1">News</a>
                                                                                                                                                                <a class="dropdown-item link_no_opasity" href="http://dayan.test-develop.info/index.php/front/news_events/2">Events</a>
                                                                                                                                                                <a class="dropdown-item link_no_opasity" href="http://dayan.test-develop.info/index.php/front/clubs/1">Clubs</a>
                                                                                                                                                                <a class="dropdown-item link_no_opasity" href="http://dayan.test-develop.info/index.php/front/activites">Activites</a>
                                                                                                                            </div>
                            </li>
                                                                                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown link_no_opasity " href="#" >Academic<span class="sr-only"></span></a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 
                                                                                                                            <a class="dropdown-item link_no_opasity" href="http://dayan.test-develop.info/index.php/front/testing_system">Testing System</a>
                                                                                                                                                                <a class="dropdown-item link_no_opasity" href="http://dayan.test-develop.info/index.php/front/level_test">Level Test</a>
                                                                                                                            </div>
                            </li>
                                                                                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown link_no_opasity " href="#" >Courses<span class="sr-only"></span></a>
                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
 
                                                                                                                            <a onclick="carret(1, 0, 0);" class="dropdown-btn dropdown-item link_no_opasity">Languages<i id="show_1_0_0" class="fa fa-caret-right"></i></a>
                                        <div class="dropdown-container" style="display: none;">
                                                                                                                                                            <a onclick="carret(1, 1, 0);" class="dropdown-btn dropdown-item link_no_opasity">English<i id="show_1_1_0" class="fa fa-caret-right"></i></a>
                                                <div class="dropdown-container" style="display: none;">
                                                                                                                                                                                            <a class="dropdown-item link_no_opasity" href="http://dayan.test-develop.info/index.php/frontcourse/index/1/adult">Adults</a>
                                                                                                                                                                                                                                                <a class="dropdown-item link_no_opasity" href="http://dayan.test-develop.info/index.php/frontcourse/index/1/children">Children</a>
                                                                                                                                                                                            </div>
                                                                                                                                                                                                        <a onclick="carret(1, 2, 0);" class="dropdown-btn dropdown-item link_no_opasity">Russian<i id="show_1_2_0" class="fa fa-caret-right"></i></a>
                                                <div class="dropdown-container" style="display: none;">
                                                                                                                                                                                            <a class="dropdown-item link_no_opasity" href="http://dayan.test-develop.info/index.php/frontcourse/index/3/adult">Adults</a>
                                                                                                                                                                                                                                                <a class="dropdown-item link_no_opasity" href="http://dayan.test-develop.info/index.php/frontcourse/index/3/children">Children</a>
                                                                                                                                                                                            </div>
                                                                                                                                                            </div>
                                                                                                                                                                    <a onclick="carret(2, 0, 0);" class="dropdown-btn dropdown-item link_no_opasity">Computer<i id="show_2_0_0" class="fa fa-caret-right"></i></a>
                                        <div class="dropdown-container" style="display: none;">
                                                                                                                                                            <a class="dropdown-item link_no_opasity" href="http://dayan.test-develop.info/index.php/frontcourse/index/2/adult">Adults</a>
                                                                                                                                                                                                        <a class="dropdown-item link_no_opasity" href="http://dayan.test-develop.info/index.php/frontcourse/index/2/children">Children</a>
                                                                                                                                                            </div>
                                                                                                                                                                    <a onclick="carret(3, 0, 0);" class="dropdown-btn dropdown-item link_no_opasity">Art<i id="show_3_0_0" class="fa fa-caret-right"></i></a>
                                        <div class="dropdown-container" style="display: none;">
                                                                                                                                                            <a class="dropdown-item link_no_opasity" href="http://dayan.test-develop.info/index.php/frontcourse/index/4/adult">Adults</a>
                                                                                                                                                                                                        <a class="dropdown-item link_no_opasity" href="http://dayan.test-develop.info/index.php/frontcourse/index/4/children">Children</a>
                                                                                                                                                            </div>
                                                                                                                                </div>
                            </li>
                                                                                            <li class="nav-item">
                                <a class="nav-link link_no_opasity " href="http://dayan.test-develop.info/index.php/front/gallery/">Gallery<span class="sr-only"></span></a>
                            </li>
                                                                                            <li class="nav-item">
                                <a class="nav-link link_no_opasity " href="http://dayan.test-develop.info/index.php/front/contact">Contact<span class="sr-only"></span></a>
                            </li>
                                                                </ul>
                </div>
             </nav>

вообщем foreach рисует меню на выходе

меню dropdown открываются и закрываются
не получается сделать так если открыть один parent при открытии другого parenta чтобы закрывался открытый parent также с chaild dropdown

@Omion · 10.10.2018, 11:46

Давно я это делал. Кривовато, у меня работает норм.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        <h1 class="caption RBO48">Example drop slide</h1>
        <div class="wrapCont clearfix col-lg-10 col-md-10">
            <div class="rxz19">
                <h3 class="RBO24">ButtonDrop</h3>
                <div class="rxz20">
                    <p class="RL18">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa debitis dolorem eius et eveniet fugit hic, in laboriosam, libero mollitia neque nulla officia omnis saepe sint ullam, vero voluptas! Magni!</p>
                </div>
            </div>           
           <div class="rxz19">
            <h3 class="RBO24">ButtonDrop</h3>
            <!-- /.RBO24 -->
            <div class="rxz20">
                <p class="RL18">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa debitis dolorem eius et eveniet fugit hic, in laboriosam, libero mollitia neque nulla officia omnis saepe sint ullam, vero voluptas! Magni!</p>
                <!-- /.RL18 -->
            </div>
             </div>

JavaScript
1
2
3
4
5
6
$(document).ready(function(){
    $(".wrapCont .rxz20").hide().prev().click(function () {
        $(".wrapCont .rxz20").not(this).slideUp().prev().css({});
        $(this).next().not(":visible").slideDown().prev().css();
    });
  });

CSS
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
.content
  .wrapCont
    padding: 0
    height: auto
    float: none
    margin-left: auto
    margin-right: auto
    width: 500px
    border: 1px solid
    &:last-child
      margin: 0 auto 150px
    &:first-child
      margin: 80px auto 150px
    .rxz18
      margin: 0 auto 40px
    .rxz19
      width: 300px
      float: right
      overflow: hidden
      transform-origin: 50% 50%
      min-height: 60px
      padding: 10px 30px
      box-shadow: none
.rxz19
  .RBO24
    margin: 0 0 30px
    display: inline-block
    width: 100%
    text-align: left
.slide
  display: none
  overflow: hidden
.block
  display: block
.rotate
  transform: rotate3d(1, 0, 0, 0deg)!important
.effect
  box-shadow: 0 0 20px rgba(0, 0, 0, .45)!important
  padding: 30px!important

вот рабочая версия. Если я верно понял.

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД 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-динозавры, а новое поколение лёгких потоков. Откат?. . .

Make dropdown to collapsed

Решение