xxxxxxxxxx
1
<div class='container' style='height:1500px; background-color: #f2f2f2'>
2
<div class="dropdown">
3
<button class="btn btn-primary dropdown-toggle" type="button" data-mdb-toggle="dropdown"
4
data-mdb-auto-close='false'
5
aria-expanded="false">
6
Dropdown form
7
</button>
8
<div class="dropdown-menu" style="width: 320px">
9
<form class="px-4 py-3">
10
<select multiple class="select" data-mdb-filter="true">
11
<option value="1">One</option>
12
<option value="2">Two</option>
13
<option value="3">Three</option>
14
<option value="4">Four</option>
15
<option value="5">Five</option>
16
<option value="6">Six</option>
17
<option value="7">Seven</option>
18
<option value="8">Eight</option>
19
<option value="9">Nine</option>
20
<option value="10">Ten</option>
21
</select>
22
</form>
23
<div class="dropdown-divider"></div>
24
<a class="dropdown-item" href="#">New around here? Sign up</a>
25
<a class="dropdown-item" href="#">Forgot password?</a>
26
</div>
27
</div>
28
</div>
1
1
xxxxxxxxxx
1
const dropdownEl = document.querySelector('.dropdown-toggle')
2
const instance = mdb.Dropdown.getInstance(dropdownEl)
3
4
document.body.addEventListener('click', (e)=> {
5
if (!e.target.classList.contains('dropdown-toggle') &&
6
!e.target.closest('.select-dropdown-container') &&
7
!e.target.closest('.dropdown-menu')){
8
instance.hide()
9
}
10
})
Console errors: 0