javascript - 单击时的菜单项显示无

Question

我有一个像下面这样的菜单，

    <li class="dropdown whitedrop" id="dropdown" style="width: 229px;">
        <a data-target="#" class="fnd-nav-link hoverwithgreen" data-toggle="dropdown"><span id="loggedon_lable">Logged on:</span>
            <span id="loggedon_user"></span></a>
            <ul id="whitedropdown-menu" class="whitedropdown-menu">         
            <li class="borderli activemenu" id="psacheck2">
                <a href="javascript:void(0)">Process Management</a>
            </li>
            <li class="borderli disabledMenu" id="modulemgt">
                <a href="javascript:void(0)">Module Management</a>
            </li>           
        </ul>
    </li>

我使用以下 CSS 使菜单在悬停时显示:

    .whitedropdown-menu{ 
        display: none;
    }

    .whitedrop:hover .whitedropdown-menu{
        display : block;
    }

但是一旦我点击“进程管理”菜单项或“模块管理”菜单项。我希望菜单消失(在“.whitedropdown-menu”的意义上消失回到“不显示”)。

我该怎么做？

请帮忙，谢谢。

Answer 1

编辑:这是一个更完整的解决方案。将显示和隐藏都绑定(bind)到事件监听器。如果需要，您甚至可以将 show() 替换为 slideDown() 并将 hide() 替换为 slideUp()一些动画。

CSS:

.whitedropdown-menu{ 
    display: none;
}

JS:

$('#dropdown').on('mouseover', function() {
    $('.whitedropdown-menu').show();
});

$('.whitedropdown-menu > li').on('click', function() {
    $('.whitedropdown-menu').hide();
});

结束编辑

---

为此你需要 JavaScript。

JS:

function hideMenu() {
  document.getElementById('whitedropdown-menu').style.display = 'none';
}

尽管有更好的方法，您可以将 HTML 中的 javascript:void(0) 替换为 javascript:hideMenu() 来调用此函数。