Форум программистов, компьютерный форум, киберфорум
Anna5194
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  

Как сделать, чтобы раскрывающийся список НЕ закрывался

Запись от Anna5194 размещена 29.07.2019 в 14:21
Показов 4037 Комментарии 2

Часто статьи о том, как сделать, чтобы раскрывающийся список или dropdown закрывался при клике на любую область. Но иногда возникает прямо противоположная проблема. Как сделать так, чтобы закрывающийся при нажатии на любую область список НЕ закрывался, а закрывался лишь при нажатии на кнопку, которая его активирует? Внизу будет html-код списка.
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
<div class="search-block__item" dropdown [autoClose]="false">
            <button id="button-autoclose" dropdownToggle type="button" class="btn dropdown-toggle">
                Количество комнат
                <span class="caret"></span>
            </button>
            <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                role="menu" aria-labelledby="button-basic">
 
                <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
                    Выберите количество комнат:
                    <label ngbButtonLabel class="btn btn--border"
                    id="oneRoom" (click)="changeOneRoom(true)"
                     (click)="thisShowResetTwo(val)">
 
                        <input ngbButton type="checkbox" [value]="1"> 1
                    </label>
                    <label ngbButtonLabel class="btn btn--border"
                    id="twoRooms" (click)="changeTwoRoom(true)"
                     (click)="thisShowResetTwo(val)">
 
                        <input ngbButton type="checkbox" [value]="2"> 2
                    </label>
                    <label ngbButtonLabel class="btn btn--border"
                    id="threeRooms" (click)="changeThreeRoom(true)"
                     (click)="thisShowResetTwo(val)">
 
                        <input ngbButton type="checkbox" [value]="3"> 3
                    </label>
                    <label ngbButtonLabel class="btn btn--border"
                    id="fourPlusRooms" (click)="changeFourPlusRoom(true)">
 
                        <input ngbButton type="checkbox" [value]="4"
                         (click)="thisShowResetTwo(val)"> 4+
                    </label>
                    <label ngbButtonLabel class="btn btn--border" (click)="thisRoomReset()"
                    class="resetFormTwo" [ngClass]="{'showReset': showRTwo}">
                        <input ngbButton type="checkbox" [value]="10" 
                        id="resetFormBuilding" #resetFormBuilding
                        [(ngModel)]="reset"> Х
                    </label>
                </div>
            </ul>
        </div>
Весь секрет расположен в самом начале кода. В div пишем [autoClose]="false", чтобы кликая на любую область мею не раскрывалось. А на кнопку, которая как раз таки и будет раскрывать наше меню, вешаем id="button-autoclose". Вот и всё)
Размещено в Без категории
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Всего комментариев 2
Комментарии
  1. Старый комментарий
    Аватар для Usaga
    Замечательно!

    А что это за директива такая и откуда она берётся все кому надо догадаются самостоятельно?
    Запись от Usaga размещена 29.07.2019 в 14:48 Usaga вне форума
  2. Старый комментарий
    Аватар для Fedor92
    На кнопку вешаем идентификатор... Забавно... Действительно - "вот и всё"...
    Запись от Fedor92 размещена 29.07.2019 в 21:54 Fedor92 вне форума
 
Новые блоги и статьи
Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого
zorxor 21.09.2026
Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .
Мобильное приложение ColorStep
pavlinmavlin 17.09.2026
Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .
Запрет дублирования строк в табличной части
Maks 13.09.2026
Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр.
Jin X 06.09.2026
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .
Программа опроса у.з. расходомера SLS-720F
Argus19 02.09.2026
Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .
Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0.
Maks 31.08.2026
При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .
Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм
anaschu 30.08.2026
Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .
Оттачиваю умение писать js программы.
russiannick 30.08.2026
Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru