我用jquery做的导航栏点击时把二级菜单全显示出来了,怎么让他只显示一个,就是点那
$(document).ready(function(){$('#tdli').click(function(){vara=document.getElementById...
$(document).ready(function(){
$('#td li').click(function(){
var a=document.getElementById('men').getElementsByTagName('div');
for (var i=0, len=a.length; i<len; i++)
{
a[i].style.display='none';
$('#men div').toggle().show(3000);
}
});
});
<div id="box">
<ul id="td">
<li >Home</li>
<li >主页二</li>
<li >主页3</li>
<li >主页4</li>
<li >主页5</li>
<li >主页6</li>
<li >主页7</li>
<li >主页8</li>
</ul>
<div id="men">
<div class="tr">
<ul >
<li>主页一</li>
<li>主页2</li>
<li>主页3</li>
<li>主页4</li>
<li>主页5</li>
<li>主页6</li>
<li>主页7</li>
<li>主页8</li>
</ul>
</div>
<div class="tr1">
<ul >
<li>主页2</li>
<li>主页2</li>
<li>主页3</li>
<li>主页4</li>
<li>主页5</li>
<li>主页6</li>
<li>主页7</li>
<li>主页8</li>
</ul>
</div>
<div class="tr2">
<ul >
<li>主页3</li>
<li>主页2</li>
<li>主页3</li>
<li>主页4</li>
<li>主页5</li>
<li>主页6</li>
<li>主页7</li>
<li>主页8</li>
</ul></div>
<div class="tr3">
<ul >
<li>主页4</li>
<li>主页2</li>
<li>主页3</li>
<li>主页4</li>
<li>主页5</li>
<li>主页6</li>
<li>主页7</li>
<li>主页8</li>
</ul>
</div>
<div class="tr4">
<ul >
<li>主页5</li>
<li>主页2</li>
<li>主页3</li>
<li>主页4</li>
<li>主页5</li>
<li>主页6</li>
<li>主页7</li>
<li>主页8</li>
</ul></div>
<div class="tr5">
<ul >
<li>主页6</li>
<li>主页2</li>
<li>主页3</li>
<li>主页4</li>
<li>主页5</li>
<li>主页6</li>
</ul></div>
<div class="tr6">
<ul >
<li>主页7</li>
</ul></div>
<div class="tr7">
<ul >
<li>主页8</li>
<li>主页2</li>
</ul>
</div>
</div>
</div> 展开
$('#td li').click(function(){
var a=document.getElementById('men').getElementsByTagName('div');
for (var i=0, len=a.length; i<len; i++)
{
a[i].style.display='none';
$('#men div').toggle().show(3000);
}
});
});
<div id="box">
<ul id="td">
<li >Home</li>
<li >主页二</li>
<li >主页3</li>
<li >主页4</li>
<li >主页5</li>
<li >主页6</li>
<li >主页7</li>
<li >主页8</li>
</ul>
<div id="men">
<div class="tr">
<ul >
<li>主页一</li>
<li>主页2</li>
<li>主页3</li>
<li>主页4</li>
<li>主页5</li>
<li>主页6</li>
<li>主页7</li>
<li>主页8</li>
</ul>
</div>
<div class="tr1">
<ul >
<li>主页2</li>
<li>主页2</li>
<li>主页3</li>
<li>主页4</li>
<li>主页5</li>
<li>主页6</li>
<li>主页7</li>
<li>主页8</li>
</ul>
</div>
<div class="tr2">
<ul >
<li>主页3</li>
<li>主页2</li>
<li>主页3</li>
<li>主页4</li>
<li>主页5</li>
<li>主页6</li>
<li>主页7</li>
<li>主页8</li>
</ul></div>
<div class="tr3">
<ul >
<li>主页4</li>
<li>主页2</li>
<li>主页3</li>
<li>主页4</li>
<li>主页5</li>
<li>主页6</li>
<li>主页7</li>
<li>主页8</li>
</ul>
</div>
<div class="tr4">
<ul >
<li>主页5</li>
<li>主页2</li>
<li>主页3</li>
<li>主页4</li>
<li>主页5</li>
<li>主页6</li>
<li>主页7</li>
<li>主页8</li>
</ul></div>
<div class="tr5">
<ul >
<li>主页6</li>
<li>主页2</li>
<li>主页3</li>
<li>主页4</li>
<li>主页5</li>
<li>主页6</li>
</ul></div>
<div class="tr6">
<ul >
<li>主页7</li>
</ul></div>
<div class="tr7">
<ul >
<li>主页8</li>
<li>主页2</li>
</ul>
</div>
</div>
</div> 展开
2个回答
展开全部
我的建议是你在要点击的列表上给每个选项添加名字,名字和后面要现实的列表类名一致
<li name="tr">Home</li>
<li name="tr1">主页二</li>
<li name="tr2">主页3</li>
<li name="tr3">主页4</li>
<li name="tr4">主页5</li>
<li name="tr5">主页6</li>
<li name="tr6">主页7</li>
<li name="tr7">主页8</li>
然后jquery
$(document).ready(function(){
$('#td li').click(function(){
$("#men ."+$(this).attr("name")).css("display", "inline");
});
});
<li name="tr">Home</li>
<li name="tr1">主页二</li>
<li name="tr2">主页3</li>
<li name="tr3">主页4</li>
<li name="tr4">主页5</li>
<li name="tr5">主页6</li>
<li name="tr6">主页7</li>
<li name="tr7">主页8</li>
然后jquery
$(document).ready(function(){
$('#td li').click(function(){
$("#men ."+$(this).attr("name")).css("display", "inline");
});
});
更多追问追答
追问
我照你上面写的都无法显示了?
追答
要不你把你的代码发给我,我给你看看
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询