xxxxxxxxxx
1
<li class="nav-item dropdown">
2
<a
3
class="nav-link dropdown-toggle"
4
href="#"
5
id="navbarDropdownMenuLink"
6
role="button"
7
data-mdb-toggle="dropdown"
8
aria-expanded="false"
9
>
10
<i class="fas fa-users"></i> Dropdown
11
</a>
12
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdownMenuLink">
13
<li>
14
<a class="dropdown-item" href="#">Action</a>
15
</li>
16
<li>
17
<a class="dropdown-item" href="#">Another action</a>
18
</li>
19
<li><hr class="dropdown-divider" /></li>
20
<li>
21
<a class="dropdown-item" href="#">Something else here</a>
22
</li>
23
</ul>
24
</li>
1
1
xxxxxxxxxx
1
const dropdownEl = document.querySelector('.dropdown-toggle');
2
const dropdownInstance = new mdb.Dropdown(dropdownEl);
3
4
dropdownEl.addEventListener('mouseenter', () => {
5
dropdownInstance.show();
6
})
7
dropdownEl.addEventListener('mouseleave', () => {
8
dropdownInstance.hide();
9
})
Console errors: 0