我用jquery做的导航栏点击时把二级菜单全显示出来了，怎么让他只显示一个，就是点那

Posted 2023-05-04

$(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>

我的建议是你在要点击的列表上给每个选项添加名字,名字和后面要现实的列表类名一致
<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");
);
);追问

我照你上面写的都无法显示了？

追答

要不你把你的代码发给我，我给你看看

追问

$(document).ready(function()
$('#td li').click(function()
$("#men."+$(this).attr(name)).css("display","inline");
);
);

追答

men空格然后在是 . 这两个不能连在一块

参考技术A 你给每个节点写个父级属性，让这个属性值等于父级的ID，点击的时候判断只有父级属性等于ID的节点才显示 如此就好了追问

没听懂你能不看照我的写一段jquery代码看看

追答

太晚了，明天再说

用jquery制作一个二级导航下拉菜单

大体流程：

       1使用$(function(){...})获取到想要作用的HTML元素。
       2通过使用children()方法寻找子元素。
       3通过使用show()方法来显示HTML元素。
       4通过使用hide()方法来隐藏HTML元素。
       5jQuery库引用方法: