Question

我在我的项目中使用第三方主题，该主题基于Bootstrap，但似乎没有使用Bootstrap导航栏。

导航栏中的下拉列表显示在悬停状态，并且在演示中，单击某个项目时关闭导航栏会重新加载整个页面。在我的项目中，我正在使用角度路由和模板，因此整个页面不会重新加载，导航栏会保持打开状态，直到光标远离它。

似乎没有涉及任何Javascript，它主要是使用CSS完成的。这是html和样式的示例：

<ul class="navigation-menu">
    <li class="has-submenu">
        <a href="">Setup</a>
         <ul class="submenu">
             <li><a href="#/setup/foo">Foo</a></li>
             <li><a href="#/setup/bar">Bar</a></li>
         </ul>
    </li>
</ul>

我认为可见性和不透明风格非常重要：

.navigation-menu > li .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    visibility: hidden;
    opacity: 0;
    margin-top: 10px;
}

.navigation-menu > li.has-submenu:hover > .submenu {
    visibility: visible;
    opacity: 1;
    margin-top: 0;
}

所以我尝试使用jQuery进行修复，我在其中更改了visiblity，并在超时后重置：

$(document).on('click', '.submenu', function () {
    var submenu = this;
    $(submenu).css('visibility','hidden');
    setTimeout(function(){
        $(submenu).removeAttr('style')
    }, 2000);
});

它似乎有效，但如果光标根本没有移动，则超时后下拉列表会再次显示。

有没有更好的方法来解决这个问题？

更新：添加了一个小提琴：

https://jsfiddle.net/2r0up3no/

奇怪，我的＆＃34;修复＆＃34;适用于Windows上的Chrome和Firefox，但是当我在Ubuntu上的Firefox上使用它时，它无法正常工作。

单击CSS关闭导航栏下拉列表

0 个答案: