<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
.firstMenu{
width: 800px;
height: 100px;
line-height: 100px;
}
.firstMenu>li{
width: 25%;
text-align: center;
position: relative;
float: left;
}
.firstMenu>li.active{
background: pink;
}
.secondMenu{
position: absolute;
display: none
;
}
.cur .secondMenu{
display: block;
}
</style>
</head>
<body>
<ul class = "firstMenu">
<li class = ""><div class="firstTitle">国内新闻</div></li>
<li>
<div class="firstTitle">国际新闻</div>
<ul class = "secondMenu">
<li>国际新闻二级菜单</li>
<li>国际新闻二级菜单</li>
<li>国际新闻二级菜单</li>
</ul>
</li>
<li>
<div class="firstTitle">社会新闻</div>
<ul class = "secondMenu">
<li>社会新闻二级菜单</li>
<li>社会新闻二级菜单</li>
<li>社会新闻二级菜单</li>
</ul>
</li>
<li><div class="firstTitle">娱乐新闻</div></li>
</ul>
<script src = "https://www.echartsjs.com/examples/vendors/jquery/jquery.js"></script>
<script>
$(function(){
$(".firstTitle").on("click", function() {
$(this).next(".secondMenu").slideToggle();
// alert($(this).next())
$(this).parent("li").toggleClass("cur");
$(this).parent("li").siblings().removeClass("cur");
$(this).parent("li").siblings().find(".secondMenu").slideUp();
})
})
</script>
</body>
</html>
3409
09-12
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
