Jquery 下拉菜单。单击时子菜单消失。那么，如何使子菜单在单击时保持不变？答案

【问题标题】：Jquery Drop Down Menu. The sub menu disappears when clicked. So, How to make the submenu stays when clicked?Jquery 下拉菜单。单击时子菜单消失。那么，如何使子菜单在单击时保持不变？
【发布时间】：2015-11-19 06:25:34
【问题描述】：

我正在使用 jquery 在单击菜单（成员）时显示子菜单。当我单击成员菜单时，切换起作用，问题是，当我单击子菜单时，它会消失，所以我希望它在单击时保持不变。如何在 javascript 中做到这一点？...

<html>
<head>
    <title>Dashboard</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(e)
        {
            $('.has-sub').click(function(){
                $(this).toggleClass('tap')
            });
        });
    </script>
</head>
<body>
    <header>
        <div class="logo"><a href="#">WORKOUT <span>FITNESS CENTER</span></a></div>
    </header>
    <div id="container">
        <nav>
            <ul>
                <li><a href="#">Walk-In</a></li>
                <li class="has-sub"><a href="#">Members</a>             
                    <ul>
                        <li><a href="#">Subscr</a></li>
                        <li><a href="#">asdasd</a></li>
                        <li><a href="#">asdasd</a></li>
                    </ul>       
                </li>
                <li><a href="#">Sales</a></li>
                <li><a href="#">Inventory</a></li>
                <li><a href="#">Suppliers</a></li>
                <li><a href="#">Reports</a></li>
            </ul>
        </nav>
        <div id="content">
            SOME CONTENT YAY
        </div>
    </div>
</body>
</html>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300);
*{
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Open Sans';
}
a{
    text-decoration: none;
}
header{
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #858585;
}
.logo {
    float: left;
    margin-top: 9px;
    margin-left: 15px;  
}
.logo a{
    font-size: 1.3em;
    color: #070807;

}
.logo a span{
    font-weight: 300;
    color: #1AC93A;
}
nav{
    width: 250px;
    height: calc(100% - 50px);
    background-color: #171717;
    float: left;
}
#content {
    width: :auto;
    margin-left: 250px;
    height: calc(100% - 50px);
    padding: 15px
}
nav li{
    list-style: none;

}
nav li a{
    color: #ccc;
    display: block;
    padding: 10px;
    font-size: 0.8em;
    border-bottom: 1px solid #0a0a0a;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
nav li a:hover{
    background-color: #030303;
    color: #fff;
    padding-left: 80px;
}
nav ul li ul {
    display: none;
}
/*nav ul li:hover > ul{
    display: block;

}*/
nav ul li.tap > ul{
    display: block;
}

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这是因为子元素上的事件在单击时会冒泡到父元素，要停止此操作，请向子元素添加点击事件并调用e.stopPropagation() 以防止父元素冒泡为.has-sub：

$(".has-sub ul").click(function(e){
    e.stopPropagation();
});

Fiddle Example

【讨论】：

【解决方案2】：

将sub类从li添加到ul

试试：

<div id="container">
    <nav>
        <ul>
            <li><a href="#">Walk-In</a>
            </li>
            <li class="has-sub"><a href="#">Members</a> 
                <ul class="sub">
                    <li><a href="#">Subscr</a>
                    </li>
                    <li><a href="#">asdasd</a>
                    </li>
                    <li><a href="#">asdasd</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Sales</a>
            </li>
            <li><a href="#">Inventory</a>
            </li>
            <li><a href="#">Suppliers</a>
            </li>
            <li><a href="#">Reports</a>
            </li>
        </ul>
    </nav>
    <div id="content">SOME CONTENT YAY</div>
</div>
  $('.has-sub').click(function(e){
       if ($(e.target).parents('.sub').length == 0 ){
        $(this).toggleClass('tap');
       }
    });

jsfiddle：https://jsfiddle.net/v9ynq7og/

【讨论】：

谢谢你的回应兄弟:)
有效！谢谢 :) 现在有很多方法 :) 非常感谢 :)

【解决方案3】：

试试这个。我已将 id 添加到主菜单中，点击检查目标 id 并基于此您可以执行适当的操作

$(document).ready(function(e) {
  $('.has-sub').click(function(e) {
    if (e.target.id)
      $(this).toggleClass('tap')
  });

});

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300);
 * {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Open Sans';
}
a {
  text-decoration: none;
}
header {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #858585;
}
.logo {
  float: left;
  margin-top: 9px;
  margin-left: 15px;
}
.logo a {
  font-size: 1.3em;
  color: #070807;
}
.logo a span {
  font-weight: 300;
  color: #1AC93A;
}
nav {
  width: 250px;
  height: calc(100% - 50px);
  background-color: #171717;
  float: left;
}
#content {
  width: : auto;
  margin-left: 250px;
  height: calc(100% - 50px);
  padding: 15px
}
nav li {
  list-style: none;
}
nav li a {
  color: #ccc;
  display: block;
  padding: 10px;
  font-size: 0.8em;
  border-bottom: 1px solid #0a0a0a;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
nav li a:hover {
  background-color: #030303;
  color: #fff;
  padding-left: 80px;
}
nav ul li ul {
  display: none;
}
/*nav ul li:hover > ul{
    display: block;

}*/

nav ul li.tap > ul {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
    <title>Dashboard</title>
    <body>
        <header>
            <div class="logo"><a href="#">WORKOUT <span>FITNESS CENTER</span></a>
            </div>
        </header>
        <div id="container">
            <nav>
                <ul>
                    <li><a href="#">Walk-In</a>
                    </li>
                    <li class="has-sub">
                        <a href="#" id='id1'>Members</a> 
                        <ul>
                            <li><a href="#">Subscr</a>
                            </li>
                            <li><a href="#">asdasd</a>
                            </li>
                            <li><a href="#">asdasd</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Sales</a>
                    </li>
                    <li><a href="#">Inventory</a>
                    </li>
                    <li><a href="#">Suppliers</a>
                    </li>
                    <li><a href="#">Reports</a>
                    </li>
                </ul>
            </nav>
            <div id="content">
                SOME CONTENT YAY
            </div>
        </div>
    </body>
</html>

【讨论】：

【解决方案4】：

我想你正在寻找这个......

 	$(document).ready(function(e)
    	{
    		$('.test').click(function(e){
    	   if($(this).hasClass("test1"))
             {
               e.stopPropagation();
             }else
               {
                $(this).toggleClass('tap');
               }
         });
    	});

**CSS**

    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300);
    *{
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	font-family: 'Open Sans';
    }
    
    a{
    	text-decoration: none;
    }
    
    header{
    	width: 100%;
    	height: 50px;
    	border-bottom: 1px solid #858585;
    }
    
    .logo {
    	float: left;
    	margin-top: 9px;
    	margin-left: 15px; 	
    }
    
    .logo a{
    	font-size: 1.3em;
    	color: #070807;
    	
    }
    .logo a span{
    	font-weight: 300;
    	color: #1AC93A;
    }
    
    nav{
    	width: 250px;
    	height: calc(100% - 50px);
    	background-color: #171717;
    	float: left;
    }
    
    #content {
    	width: :auto;
    	margin-left: 250px;
    	height: calc(100% - 50px);
    	padding: 15px
    }
    
    nav li{
    	list-style: none;
    
    }
    
    nav li a{
    	color: #ccc;
    	display: block;
    	padding: 10px;
    	font-size: 0.8em;
    	border-bottom: 1px solid #0a0a0a;
    	-webkit-transition: 0.2s;
    	-moz-transition: 0.2s;
    	-o-transition: 0.2s;
    	transition: 0.2s;
    }
    
    nav li a:hover{
    	background-color: #030303;
    	color: #fff;
    	padding-left: 80px;
    }
    
    nav ul li ul {
    	display: none;
    }
    
    /*nav ul li:hover > ul{
    	display: block;
    
    }*/
    
    nav ul li.tap > ul{
    	display: block;
    }

<html>
    <head>
    	<title>Dashboard</title>
    	
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    	
    
   

    </head>
    <body>
    
    	<header>
    		<div class="logo"><a href="#">WORKOUT <span>FITNESS CENTER</span></a></div>
    	</header>
    	<div id="container">
    		<nav>
    			<ul>
    				<li><a href="#">Walk-In</a></li>
    				<li class="has-sub test"><a href="#">Members</a>				
     					 <ul>
    						   	<li><a href="#" class='test test1'>Subscr</a></li>
        						<li><a href="#" class='test test1'>asdasd</a></li>
        						<li><a href="#" class='test test1'>asdasd</a></li>
    					  </ul>       
    				</li>
    				<li><a href="#">Sales</a></li>
    				<li><a href="#">Inventory</a></li>
    				<li><a href="#">Suppliers</a></li>
    				<li><a href="#">Reports</a></li>
    			</ul>
    		</nav>
    
    		<div id="content">
    			SOME CONTENT YAY
    		</div>
    	</div>
    
    
    </body>
    </html>

【讨论】：

哇！不错 :) 我喜欢它。谢谢！
你可以欣赏这个答案..如果它是你想要的

【解决方案5】：

需要添加一个jquery函数。

$('.has-sub ul').click(function(){
        return false
    });

这是满足您要求的jsFiddle

【讨论】：