Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
0 / 0 / 0
Регистрация: 15.06.2015
Сообщений: 4
1

Скрыть bootstrap меню на мобильной версии при клике вне её области.

25.02.2021, 16:39. Показов 729. Ответов 0
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Всем привет. ребят помогите пожалуйста. есть стандартный навбар который работает. но есть один момент. навбар закрывается по кнопке. но хотелось бы сделать чтобы он закрывался еще и по клику вне открытого меню.

помогите найти решение пожалуйста!

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<section id="menubar">
    <div class="row gen-menu">
 
        <div class="col-md-2 left-ch">
            <div class="1tel">8977777777</div>
            <div class="2tel">info@info.ru</div>
        </div>
        <div class="col-md-8 menu-g">
            <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
            
        
          
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav mx-auto">
                    <li class="nav-item active">
                        <li class="nav-item dropdown">
                            <a class="nav-link g-stucture " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              Главная
                            </a>
                            
                          </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Вступление
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                          <a class="dropdown-item " href="#">Action</a>
                          <a class="dropdown-item" href="#">Another action</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                      </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Структура
                      </a>
                      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </div>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Документы
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                          <a class="dropdown-item" href="#">Action</a>
                          <a class="dropdown-item" href="#">Another action</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                      </li>
                      <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Реестр СРО
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                          <a class="dropdown-item" href="#">Action</a>
                          <a class="dropdown-item" href="#">Another action</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                      </li>
                      <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Контроль
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                          <a class="dropdown-item" href="#">Action</a>
                          <a class="dropdown-item" href="#">Another action</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                      </li>
                      <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          Новости
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                          <a class="dropdown-item" href="#">Action</a>
                          <a class="dropdown-item" href="#">Another action</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                      </li>
    
                      <li class="nav-item active">
                        <a class="nav-link" href="#">Контакты</a>
                      </li>
                  </ul>
                </div>
              </nav>
        </div>
        
          <div class="col-md-2 right-ch">
            <div class="right-ch">
                <div class="lichny">Личный кабинет</div>
                <div class="zvonok">Обратный звонок</div>
            </div>
          </div>
    </div>
</section>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
25.02.2021, 16:39
Ответы с готовыми решениями:

Показать/скрыть меню при клике вне его области
&lt;button type=&quot;button&quot; id=&quot;toggle&quot;&gt;Меню&lt;/button&gt; &lt;ul class=&quot;nav&quot; id=&quot;nav&quot;&gt; ...

Скрыть меню при клике вне его области
Здравствуйте, имеется меню которое появляется по клику на кнопке. Я хочу сделать, чтобы по клику...

Скрыть меню, при клике вне его
В общем, решил изучать TS / NodeJS / Angular Т.к. изучаю 3й день, решил попрактиковаться, и...

Как скрыть меню при клике мне его области или внутри по ссылке
Здравствуйте. Есть меню которое открывается и закрывается только по нажатию на гамбургер. Если...

0
25.02.2021, 16:39
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.02.2021, 16:39
Помогаю со студенческими работами здесь

Работа с меню. При клике на кнопке меню или вне его, меню должно закрываться
Добрый вечер! Изучаю JQuery. Вот ради развития решил написать меню, практически такое же как на...

Как скрыть выпадающий блок меню по клику вне его области
Выручайте! Нужно скрыть выпадающий блок с id=&quot;hidden_12&quot; по клику вне его области. Как это можно...

Как скрыть форму при клике вне её
Привет, ребят :) Тема такая, есть приложение, которое вызывается из трея нажатием на иконку, но и...

Скрыть div при клике вне элемента
Доброго времени суток. Для показа div'а и его скрытия при клике вне его границ использую вот такой...

Почему событие ComboBox срабатывает при клике вне его области
Здравствуйте, насколько я понимаю процедура ComboBox1_MouseDown(ByVal Button As Integer, ByVal...

Скрыть меню при клике
$(function(){ $('#sess_messages').hide().fadeIn(); $('#topmenu .menu .li, #usermenu...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru