单击时的菜单项显示无

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“返回到"display none”的意义上消失)。

我该怎么做呢？

请帮帮忙，谢谢。

Answer 1

编辑:这里有一个更完整的解决方案。将显示和隐藏都绑定到事件侦听器。如果你想要一些动画效果，你甚至可以用slideDown()替换show()，用slideUp()替换hide()。

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';
}

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

Answer 2

您可以使用Javascript onclick事件来设置display none属性

Answer 3

在css中使用id而不是class

然后遵循@flowstoneknight给出的答案