一、实现功能
想要做成树形菜单，无非就是点击父菜单，则把它的子菜单显示出来。
二、设计思路
要想实现此效果，则当点击父菜单时，给父菜单添加事件，调用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("+");
}
});
});
想要做成树形菜单，无非就是点击父菜单，则把它的子菜单显示出来。
二、设计思路
要想实现此效果，则当点击父菜单时，给父菜单添加事件，调用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("+");
}
});
});
四、 用浏览器进行测试并显示结果如下：
刚进入页面时：
点击父菜单时：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
