jquery如何实现二级菜单，如何修改JQ代码实现第一次点击自己显示子节点
第二次点击同级节点时显示同级节下面的子元素，自己下面的子元素隐藏代码如下<scripttype="text/javascript">$(function(){varfla...
第二次点击同级节点时显示同级节下面的子元素，自己下面的子元素隐藏
代码如下
<script type="text/javascript">
$(function () {
var flag =true;
$("#header>li").click(function(){
var num = $(this).index();
console.log($(this).index())
if(flag){
$(this).css("height","100px").siblings().css("height","20px").children("ul").css("display","none")
$("#header>li").eq(num).children("ul").css({"display":"block"})
return flag =false;
}else{
$(this).css("height","20px").children("ul").css("display","none")
return flag = true;
}
})
})
</script>
<style type="text/css">
*{
margin:0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #666;
}
#header{
margin:100px;
}
#header .header{
height: 20px;
width: 100px;
background:#666;
text-align:center;
}
#header .header a {
color:#fff;
}
#header .header ul{
display: none;
height: 0px;
}
#header .header ul li{
height: 20px;
width: 100px;
background:#f00;
}
#header .header ul.show{
display: block;
}
</style>
</head>
<body>
<ul id="header">
<li class="header">
<p>123</p>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</li>
<li class="header">
<p>123</p>
<ul>
<li>0000</li>
<li>0000</li>
<li>1324</li>
<li>1324</li>
</ul>
</li>
<li class="header">
<p>123</p>
<ul>
<li>1234</li>
<li>1234</li>
<li>1324</li>
<li>1324</li>
</ul>
</li>
</ul> 展开
代码如下
<script type="text/javascript">
$(function () {
var flag =true;
$("#header>li").click(function(){
var num = $(this).index();
console.log($(this).index())
if(flag){
$(this).css("height","100px").siblings().css("height","20px").children("ul").css("display","none")
$("#header>li").eq(num).children("ul").css({"display":"block"})
return flag =false;
}else{
$(this).css("height","20px").children("ul").css("display","none")
return flag = true;
}
})
})
</script>
<style type="text/css">
*{
margin:0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #666;
}
#header{
margin:100px;
}
#header .header{
height: 20px;
width: 100px;
background:#666;
text-align:center;
}
#header .header a {
color:#fff;
}
#header .header ul{
display: none;
height: 0px;
}
#header .header ul li{
height: 20px;
width: 100px;
background:#f00;
}
#header .header ul.show{
display: block;
}
</style>
</head>
<body>
<ul id="header">
<li class="header">
<p>123</p>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</li>
<li class="header">
<p>123</p>
<ul>
<li>0000</li>
<li>0000</li>
<li>1324</li>
<li>1324</li>
</ul>
</li>
<li class="header">
<p>123</p>
<ul>
<li>1234</li>
<li>1234</li>
<li>1324</li>
<li>1324</li>
</ul>
</li>
</ul> 展开
1个回答
展开全部
$(function () {
$("#header>li").click(function(){
if( $(this).hasClass("flag") ){
$(this).removeClass("flag").height(20).find("ul").hide();
}else{
$("#header>li").removeClass("flag").height(20).find("ul").hide();
$(this).addClass("flag").height(100).find("ul").show();
}
})
})
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
