单击项目后关闭css悬停dopdown菜单

I'm using pure css dropdown menu. But after clicking the menu item, the dropdown menu is alway displayed. It will be hidden when I give my mouse out of the menu. How can I close the pure css hover dropdown menu after clicking on the menu item? Thanks for your advice. Here is my code:

我正在使用纯css下拉菜单。但是在单击菜单项后，总是会显示下拉菜单。当我将鼠标从菜单中移出时，它将被隐藏。单击菜单项后如何关闭纯css悬停下拉菜单？谢谢你的建议。这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
    ul{
        padding: 0;
        list-style: none;
        background: #f2f2f2;
    }
    ul li{
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul li a{
        display: block;
        padding: 8px 25px;
        color: #333;
        text-decoration: none;
    }
    ul li a:hover{
        color: #fff;
        background: #939393;
    }
    ul li ul.dropdown{
        min-width: 100%; /* Set width of the dropdown */
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li:hover ul.dropdown{
        display: block; /* Display the dropdown */
    }
    ul li ul.dropdown li{
        display: block;
    }
</style>  
</head>
<body>
    <ul>
        <li>
            <a id="product" href="#">Products</a>
            <ul class="dropdown">
                <li><a onClick="document.getElementById('product').innerHTML = 'Laptop selected!'; return false;" href="#">Laptops</a></li>
                <li><a href="#">Monitors</a></li>
                <li><a href="#">Printers</a></li>
            </ul>
        </li>
    </ul>

</body>
</html>

2 个解决方案

#1

Here is a fiddle for you: https://jsfiddle.net/6a3xogfj/2/

这是一个小提琴：https：//jsfiddle.net/6a3xogfj/2/

What I did was adding classes to distinguish .open and .closed dropdown status.

我所做的是添加类来区分.open和.closed下拉状态。

CSS

CSS

ul li ul.dropdown.closed { display: none; }
ul li ul.dropdown.open { display: block; }

The rest was done via jQuery.

其余的是通过jQuery完成的。

$('a#product').on('mouseover', function() {

  $(this).siblings('ul.dropdown').removeClass('closed').addClass('open');
});

$('ul.dropdown a').on('click', function(e) {

  e.preventDefault();

  $(this).closest('ul.dropdown').removeClass('open').addClass('closed');
  $('section').removeClass('active').filter( $(this).attr('href') ).addClass('active');
  $('a#product').text( $(this).text() + " selected!");
});

When you hover the menu item #product the dropdown is set from .closed to .open and therefore shown. As soon as a dropdown item is clicked those classes are reset to close the dropdown.

当您将菜单项目#product悬停时，下拉列表将从.closed设置为.open并因此显示。单击下拉项后，将重置这些类以关闭下拉列表。

#2

What we did is oncClick hide and show it again after a blink:

我们做的是oncClick隐藏并在眨眼后再次显示：

var dropDownMenu = $('#" + clikedMenuItemId + "').next('ul'); 
dropDownMenu.hide(0, function() { 
 setTimeout(function() { 
   dropDownMenu.show(); 
 }, 
 1000); 
});

#1