当单击要切换元素的元素时,它会自动切换。为什么?只是不明白,也许写错字或忘记了什么,我不知道。刚刚头疼。 谢谢你的帮助! FIDDLE
$(function() {
$('#dropdown').hide();
$('#list li:nth-child(4) a').click(function() {
$('#dropdown').slideToggle("slow");
});
});

* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
.fixed-side-menu {
position: fixed;
left: 0;
top: 0;
width: 200px;
height: 100%;
background: #333;
}
#list li a {
position: Relative;
display: block;
padding: 10px 0px;
text-align: Center;
font-size: 30px;
color: #fff;
}
#list li a:hover {
background: #367a8b;
}
#dropdown {
background: #367a8b;
display:Block;
}
#dropdown li a {
padding: 10px 0px;
margin: 10px 0;
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixed-side-menu">
<ul id="list">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">FAQ</a>
<ul id="dropdown">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
</ul>
</div>
&#13;
答案 0 :(得分:2)
您只需要选择属于特定li
元素的直接子元素的锚点(顺便说一句,您应该只选择li:nth-child(4)
的直接子元素#list
):
$('#list > li:nth-child(4) > a').click(function() {
$('#dropdown').slideToggle("slow");
});
否则,你也在#dropdown
中加入了锚点。