【发布时间】：2017-05-26 19:36:48
【问题描述】：
我的代码存在以下问题。当我在菜单中单击“element2”的嵌套元素时，我的下拉菜单被隐藏了。 我只想在单击“element2”而不是子元素时隐藏它。 这是我想要的效果链接：http://urban.nyasha.me/html/form-basic.html
$(".sidebar-nav>li").has("ul").click(
function(e){
$(this).toggleClass("toggled");
$(this).children("ul").toggleClass("toggled");
}
);/* line 14, ../sass/style.scss */
body {
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
background-color: #FFF;
margin: 0;
padding: 0;
}
/* line 20, ../sass/style.scss */
body #wrapper {
padding-left: 250px;
}
/* line 7, ../sass/style.scss */
body #wrapper {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/* line 23, ../sass/style.scss */
body #wrapper.toggled {
padding-left: 80px;
}
/* line 25, ../sass/style.scss */
body #wrapper.toggled #sidebar-wrapper {
width: 80px;
}
/* line 32, ../sass/style.scss */
body #wrapper #sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 250px;
height: 100%;
margin-left: -250px;
overflow-y: auto;
overflow: hidden;
background: #34495E;
}
/* line 7, ../sass/style.scss */
body #wrapper #sidebar-wrapper {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/* line 43, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav {
list-style-type: none;
margin: 0;
padding: 0;
color: #E4F1FE;
}
/* line 48, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li {
text-indent: 40px;
line-height: 40px;
}
/* line 51, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li:hover {
background-color: #2C3E50;
cursor: pointer;
}
/* line 55, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li ul {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
background: #23384D;
}
/* line 62, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li ul li a {
text-decoration: none;
line-height: 5px;
color: #E4F1FE;
}
/* line 67, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li ul li:hover {
background: #23384D;
}
/* line 69, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li ul li:hover a {
color: #FFF;
}
/* line 75, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li ul.toggled {
display: block;
}
/* line 79, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li.toggled {
background-color: #2C3E50;
}
/* line 82, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li.sidebar-brand {
padding: 15px 0;
text-transform: uppercase;
font-size: 1.09em;
}
/* line 86, ../sass/style.scss */
body #wrapper #sidebar-wrapper .sidebar-nav li.sidebar-brand:hover {
background-color: #34495E;
cursor: default;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
Logo
</li>
<li>
Element1
</li>
<li>
Element2
<ul>
<li>
<a href="#">Sublement1</a>
</li>
<li>
<a href="#">Subelement2</a>
</li>
</ul>
</li>
<li>
Element 3
</li>
<li>
Element4
</li>
</ul>
</div>
<div id="page-content-wrapper">
</div>
</div>
</body>【问题讨论】：
标签： jquery html css drop-down-menu