Форум программистов, компьютерный форум, киберфорум
Наши страницы
Anna5194
Войти
Регистрация
Восстановить пароль
Оценить эту запись

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

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

Часто статьи о том, как сделать, чтобы раскрывающийся список или 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". Вот и всё)
Размещено в Без категории
Просмотров 214 Комментарии 2
Всего комментариев 2
Комментарии
  1. Старый комментарий
    Аватар для Usaga
    Замечательно!

    А что это за директива такая и откуда она берётся все кому надо догадаются самостоятельно?
    Запись от Usaga размещена 29.07.2019 в 14:48 Usaga на форуме
  2. Старый комментарий
    Аватар для Fedor92
    На кнопку вешаем идентификатор... Забавно... Действительно - "вот и всё"...
    Запись от Fedor92 размещена 29.07.2019 в 21:54 Fedor92 вне форума
    Обновил(-а) Fedor92 29.07.2019 в 21:58
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru