如何隐藏下拉菜单列表项答案

【问题标题】：How to hide the drop down menu list item如何隐藏下拉菜单列表项
【发布时间】：2015-12-17 06:24:54
【问题描述】：

我使用 jQuery 创建了一个简单的菜单。单击菜单项后，它会显示一个下拉菜单，那么如何使当前菜单项显示并且先前打开的菜单在单击后自动隐藏？

[密码笔][1]

[1]: http://codepen.io/firnasfaris10/pen/mVVKvd

【问题讨论】：

标签： jquery html css drop-down-menu

【解决方案1】：

试试这个：

    $('.nav li a').click(
      function () { //appearing on hover
 $(this).closest('.nav').find('ul').not($(this).closest('ul')).slideUp();
        $(this).next('ul').slideToggle();

      }
    );
$('body').click(function(e){
  if ($(e.target).closest('.nav').length == 0) {
    $('.nav ul').slideUp();
  };
});

http://codepen.io/anon/pen/EPKYyv

【讨论】：

列表项中有ul列表项时如何处理
当我单击它时，它会显示，但是当我单击同一项目时它不会关闭。还有我如何在点击外侧（即正文）时关闭所有打开的项目。
如果我打开服务项，然后打开关于我们项，那么服务项仍然可见

【解决方案2】：

你好，现在你可以试试这个 jquery 代码。

$(document).ready(function(){
    
  $('.nav > li').click(function(){
    $('.nav > li ul').slideUp();  
    if ($(this).find('ul').is(":visible")){
$(this).find('ul').slideUp(300);
}else{

$(this).find('ul').slideDown(300);    
}
  });

});

.nav {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.nav li {
	float: left;
	width: 160px;
	position: relative;
}

.nav li a {
	background: #333;
	color: #fff;
	display: block;
	padding: 7px 8px;
	text-decoration: none;
	border-top: 1px solid #069;
}

.nav li a:hover {
	color: #069;
}

/*=== submenu ===*/

.nav  li ul {
	display: none;
	position: absolute;
	margin-left: 0px;
	list-style: none;
	padding: 0px;
}

.nav ul li {
	width: 160px;
	float: left;
}

.nav ul a {
	display: block;
	height: 15px;
	padding: 7px 8px;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid #222;
}

.nav ul li a:hover {
	color: #069;
  font-size:2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="navigation">
  		<ul class="nav">
  			<li>
  				<a href="#">Home</a>
  			</li>
  			<li>
  				<a href="#">Services</a>
  				<ul>
  					<li><a href="#">Consulting</a></li>
  					<li><a href="#">Sales</a></li>
  					<li><a href="#">Support</a></li>
  				</ul>
  			</li>
  			<li>
  				<a href="#">About Us</a>
  				<ul>
  					<li><a href="#">Company</a></li>
  					<li><a href="#">Mission</a></li>
  					<li><a href="#">Contact Information</a></li>
  				</ul>
  			</li>
  		</ul>
  	</div>

【讨论】：

列表项中有ul列表项时如何处理
@Mohamed 你能在 jsfiddle.net 中展示一些示例代码吗

【解决方案3】：

$('.nav li').on('click', function(ev) {
  $(this).find('> ul').slideToggle();
  $(this).siblings('li').children('ul').slideUp();
  ev.stopPropagation();
});

.nav {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.nav li {
  float: left;
  width: 160px;
  position: relative;
}
.nav li a {
  background: #333;
  color: #fff;
  display: block;
  padding: 7px 8px;
  text-decoration: none;
  border-top: 1px solid #069;
}
.nav li a:hover {
  color: #069;
}
/*=== submenu ===*/

.nav ul {
  display: none;
  position: absolute;
  margin-left: 0px;
  list-style: none;
  padding: 0px;
}
.nav ul ul {
  left: 100%;
  top: 0;
}
.nav ul li {
  width: 160px;
  float: left;
}
.nav ul a {
  display: block;
  height: 15px;
  padding: 7px 8px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #222;
}
.nav ul li a:hover {
  color: #069;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <ul class="nav">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Services</a>
      <ul>
        <li><a href="#">Consulting</a>
        </li>
        <li><a href="#">Sales</a>
        </li>
        <li><a href="#">Support</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">About Us</a>
      <ul>
        <li><a href="#">Contact Information</a>
          <ul>
            <li><a href="#">Company</a>
            </li>
            <li><a href="#">Mission</a>
            </li>
            <li><a href="#">Contact Information</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

【讨论】：

列表项中有ul列表项时如何处理
你是说三级菜单？
是的。就是这样。但是怎么做呢？
好。但是当我点击侧面（即身体）时，如何让它们隐藏起来。当我打开 3 级菜单时出现一个小动画问题，如果我单击另一个主菜单，则会出现一个小问题。
您可以在带有 z-index 的主体上添加覆盖 div，当用户单击它时，您可以 slideUp ul

【解决方案4】：

在 js 中试试这个：

<script type="text/javascript">
$(function () {
    $('.nav li').hover(
        function () { //appearing on hover
            $(".nav li").find("ul").hide();
            $(this).find('ul').slideToggle();

            // $(this).parent().find('li').find('ul').slideToggle();
        },
        function () { //disappearing on hover
            $(this).find('ul').slideToggle();
            $(this).find('li').children('ul').slideToggle();
        }
    );    
});    
</script>

【讨论】：