Question

我正在使用纯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>

Answer 1

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

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

<强> CSS

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

其余的是通过jQuery完成的。

<强> JS

$('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!");
});

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

Answer 2

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

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

Answer 3

我可以通过将下拉菜单样式设置为“显示：无；”来“关闭”菜单。当您单击一个下拉元素时。然后通过设置样式'display：'';带回下拉菜单。当您将鼠标悬停在菜单项上时。我修改了您的代码以演示这种方法：

<!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="#" onmouseover="enableDropdown()">Products</a>
            <ul id="dropdown" class="dropdown">
                <li><a href="javascript:myFunction_1();">Laptops</a></li>
                <li><a href="javascript:myFunction_2();">Monitors</a></li>
                <li><a href="javascript:myFunction_3();">Printers</a></li>
            </ul>
        </li>
    </ul>

</body>
</html>

<script>
  function disableDropdown()
  {
      // dismiss menu by disabling each drop down menu in UI
      document.getElementById('dropdown').style.display = 'none';
  }

  function enableDropdown()
  {
      // re-enable each drop down menu in UI
      document.getElementById('dropdown').style.display = '';
  }

  function myFunction_1()
  {
      document.getElementById('product').innerHTML = 'Laptop selected!';
      disableDropdown();
  }

  function myFunction_2()
  {
      document.getElementById('product').innerHTML = 'Monitors selected!';
      disableDropdown();
  }
  function myFunction_3()
  {
      document.getElementById('product').innerHTML = 'Printers selected!';
      disableDropdown();
  } 

</script>

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

3 个答案: