Question

我正在尝试使用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，并且与closeDropdownMenu函数相同。

我试过了：

$rootScope.dropdown = document.getElementById('adminDropdown');
$rootScope.dropdown.addEventListener("mouseover", () => {
   $rootScope.dropdown.classList.add('open');
});

$rootScope.dropdown.addEventListener("mouseout", () => {
   $rootScope.dropdown.classList.remove('open');
});

但我希望能够更改参数ID，因此我可以多次使用相同的功能，因为我有多个下拉列表。

有人可以告诉我这个错误吗？感谢。

Answer 1

使用ngMouseover和ngMouseleave代替

<a ng-mouseover="openDropdownMenu('adminDropdown')"
   ng-mouseleave="closeDropdownMenu('adminDropdown')">
    ...
</a>

只有在角度范围内进行评估时，才能使用这些功能。

onmouseover和onmouseout错误函数未定义

1 个答案: