用JQuery+CSS来实现树形菜单

最新推荐文章于 2026-05-03 07:50:50 发布

原创最新推荐文章于 2026-05-03 07:50:50 发布 · 1.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

J2EE

当前文章被收录于：

J2EE

19 篇文章 0 人学习

订阅专栏查看详情

JavaScript

当前文章被收录于：

JavaScript

11 篇文章 0 人学习

订阅专栏查看详情

JQuery

当前文章被收录于：

JQuery

4 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

一、实现功能
想要做成树形菜单，无非就是点击父菜单，则把它的子菜单显示出来。
二、设计思路
要想实现此效果，则当点击父菜单时，给父菜单添加事件，调用toggle()函数来把它的子菜单显示出来。
并把子菜单的“+”号改为“-”号。
三、完成以上两步后，则开始用代码实现了
1.在你的html里面设计几个<div>来
<body>
<div id="news">
<div class="p" ><span>+</span>体育新闻</div>
<div class="c">    篮球新闻</div>
<div class="c">    足球新闻</div>
</div>

<div id="news">
<div class="p"><span>+</span>娱乐新闻</div>
<div class="c">    港台新闻</div>
<div class="c">    大陆新闻</div>
</div>
</body>
设计的父菜单和子菜单虽然在同一级别上，但可以用 来将它们区分开来。

2.然后在你的css里面设置div的样式：
.p{
cursor:hand;
}

.news{
width: 100px;
}

.c{
display:none;
}

3.在你的js里实现功能：
$(document).ready(function(){
$(".p").click(function(){
$(this).nextAll().toggle();
var objOperator = $(this).children("span");
if(objOperator.html()=="+"){
objOperator.html("-");
}else{
objOperator.html("+");
}
});
});

四、用浏览器进行测试并显示结果如下：

刚进入页面时：点击父菜单时：