使用jQuery实现点击下拉与隐藏菜单
具体效果图如下:
点击的时候打开下拉菜单,同时关闭其他已经打开的下拉菜单,再次点击关闭下拉菜单;
以下是代码部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.list {
width: 300px;
border: 1px solid black;
}
.li {
width: 100%;
height: 40px;
background-color: yellow;
border-bottom: 1px solid black;
color: black;
font-size: 20px;
cursor: pointer;
}
.li:hover {
color: red;
}
.else {
width: 100%;
display: none;
}
.else-list {
width: 100%;
height: 40px;
background-color: white;
border: 1px solid black;
border-left: none;
border-right: none;
text-align: center;
font-size: 20px;
color: black;
}
.else-list:hover {
color: white;
background-color: blue;
}
.last {
border-bottom: none;
}
.first {
border-top: none;
}
</style>
</head>
<body>
<ul class="list">
<li>
<div class="li">
新闻中心
</div>
<div class="else">
<div class="else-list first">添加新闻</div>
<div class="else-list">添加新闻</div>
<div class="else-list">添加新闻</div>
<div class="else-list">添加新闻</div>
</div>
</li>
<li>
<div class="li">
关于我们
</div>
<div class="else">
<div class="else-list first">添加新闻</div>
<div class="else-list">添加新闻</div>
<div class="else-list">添加新闻</div>
<div class="else-list">添加新闻</div>
</div>
</li>
<li>
<div class="li">
业务联系
</div>
<div class="else">
<div class="else-list first">添加新闻</div>
<div class="else-list">添加新闻</div>
<div class="else-list">添加新闻</div>
<div class="else-list">添加新闻</div>
</div>
</li>
<li class="last">
<div class="li">
联系我们
</div>
<div class="else">
<div class="else-list first">添加新闻</div>
<div class="else-list">添加新闻</div>
<div class="else-list">添加新闻</div>
<div class="else-list">添加新闻</div>
</div>
</li>
</ul>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('.list').find('li:first-child').children('.else').show(); // 首行默认显示
$(".list > li").on("click", ".li", function() {
$(this).next('.else').slideToggle(500);
$(this).parent().siblings().children('.else').slideUp(500);
$("html,body").animate({
scrollTop: 0
}, 500);
});
});
</script>
</body>
</html>