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

但是，一旦我点击＆＃34;流程管理＆＃34;菜单项或＆＃34;模块管理＆＃34;菜单项。我希望菜单消失（在意义上消失＆＃34; .whitedropdown-menu＆＃34;回到＆＃34;显示无＆＃34;）。

我该怎么做？

请帮忙，感谢。

Answer 1

编辑：这是一个更完整的解决方案。将显示和隐藏绑定到事件侦听器。如果您想要一些动画，您甚至可以将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';
}

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

Answer 2

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

Answer 3

在css中使用id而不是class

然后按照@flowstoneknight

给出的答案

Answer 4

jquery怎么样？

// hide() is equivalent to display:none;

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

// also you should have an event for the hover $('#dropdown').mouseover(function() { $('#whitedropdown-menu').show(); });

菜单项单击显示无

4 个答案: