单击项目后关闭css悬停下拉菜单答案

【问题标题】：close css hover dopdown menu after click on item单击项目后关闭css悬停下拉菜单
【发布时间】：2016-05-19 11:46:43
【问题描述】：

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

【问题讨论】：

您可以使用 js 来执行此操作，例如单击任何菜单项后设置无显示。创建一个 css 类以显示类似隐藏，并在单击任何项目后将类添加到菜单。

标签： css dropdown

【解决方案1】：

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

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

CSS

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

其余的都是通过 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!");
});

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

【讨论】：

您可能还想在鼠标悬停时隐藏菜单。对于这个答案有一个非 JQuery 示例也很好。

【解决方案2】：

我们做的是oncClick hide，眨眼后再次显示：

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

【讨论】：

【解决方案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>

【讨论】：