Я пытаюсь открыть раскрывающееся меню, используя onmouseover и onmouseout.
<div id="adminDropdown" class="dropdown" dropdown>
<a onmouseover="openDropdownMenu('adminDropdown')"
onmouseout="closeDropdownMenu('adminDropdown')">
Admin
</a>
<ul class="dropdown-menu" role="menu">
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
</ul>
</div>
<div id="userProfile" class="dropdown" dropdown>
<a onmouseover="openDropdownMenu('userProfile')"
onmouseout="closeDropdownMenu('userProfile')">
Username
</a>
<ul class="dropdown-menu" role="menu">
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
</ul>
</div>
У моего javascript есть следующий код:
$rootScope.openDropdownMenu = (id: string) => {
var dropdown = document.getElementById(id);
dropdown.classList.add('open');
};
$rootScope.closeDropdownMenu = (id: string) => {
var dropdown = document.getElementById(id);
dropdown.classList.remove('open');
};
Но каждый раз, когда я Uncaught ReferenceError: openDropdownMenu is not defined
на ссылки, это дало бы мне Uncaught ReferenceError: openDropdownMenu is not defined
и тот же с функцией closeDropdownMenu.
Я пытался:
$rootScope.dropdown = document.getElementById('adminDropdown');
$rootScope.dropdown.addEventListener("mouseover", () => {
$rootScope.dropdown.classList.add('open');
});
$rootScope.dropdown.addEventListener("mouseout", () => {
$rootScope.dropdown.classList.remove('open');
});
Но я хочу иметь возможность изменять идентификатор параметра, поэтому я могу использовать одну и ту же функцию более одного раза, поскольку у меня есть более одного раскрывающегося списка.
Может кто-нибудь просветить меня по этой ошибке? Благодарю.
Вместо этого используйте ngMouseover и ngMouseleave
<a ng-mouseover="openDropdownMenu('adminDropdown')"
ng-mouseleave="closeDropdownMenu('adminDropdown')">
...
</a>
Функции будут доступны только при оценке внутри угловой области.
$rootScope
?