你是想最多只有一个展开的组对吧？
这样的话，当你触发你的点击事件展开对应分组的时候，先找到其它展开的分组，将其折叠，同时将其组名前边的减号变成加号，然后再展开你点击的分组。
<ul id="block"><li><span class="icon"></span><ul>......</ul></li>
<li><span class="icon"></span><ul>......</ul></li>
<li><span class="icon"></span><ul>......</ul></li>
<li><span class="icon"></span><ul>......</ul></li>
</ul>
//为简化代码，使用jquery
//expand的是展开状态下的图标class
//fold的是展开状态下的图标class
<script>
$('.icon').on('click', function(){
var el = $(this)
if(el.hasClass('expand')){
el.removeClass('expand').addClass('fold')
el.next().hide()//对应内容隐藏
}else{
$('#block > li > .expand').removeClass('expand').addClass('fold')
el.removeClass('fold').addClass('expand')
el.next().show()//显示对应内容
}
})
</script>
大致就是这个思路，细节可能需要对应需求调整。
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
*{margin:0padding:0}
a{text-decoration: none}
li{list-style: none}
#list{width:200pxmargin:30px auto}
#list .son{display: none}
</style>
</head>
<body>
<ul id="list">
<li class="main">
<p><span>+</span>商品管理</p>
<ul class="son">
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
<li>11111111</li>
</ul>
</li>
<li class="main">
<p><span>+</span>商品管理</p>
<ul class="son">
<li>22222222</li>
<li>22222222</li>
<li>22222222</li>
<li>22222222</li>
<li>22222222</li>
</ul>
</li>
<li class="main">
<p><span>+</span>商品管理</p>
<ul class="son">
<li>33333333</li>
<li>33333333</li>
<li>33333333</li>
<li>33333333</li>
<li>33333333</li>
</ul>
</li>
<li class="main">
<p><span>+</span>商品管理</p>
<ul class="son">
<li>44444444</li>
<li>44444444</li>
<li>44444444</li>
<li>44444444</li>
<li>44444444</li>
</ul>
</li>
<li class="main">
<p><span>+</span>商品管理</p>
<ul class="son">
<li>55555555</li>
<li>55555555</li>
<li>55555555</li>
<li>55555555</li>
<li>55555555</li>
</ul>
</li>
</ul>
<script type="text/javascript">
//这是有js和jq两种写法，任取一种，两种不要同时存在
//如果选择jq写法，记得引入jq文件
//js写法：
window.onload = function(){
var main = document.getElementsByClassName("main")
var son = document.getElementsByClassName("son")
var p = document.getElementsByTagName("p")
for(var i = 0i<p.lengthi++){
p[i].index = i
p[i].onclick = function(){
for(var j = 0j<son.lengthj++){
son[j].style.display="none"
p[j].getElementsByTagName("span")[0].innerText="+"
}
var dom = this.getElementsByTagName("span")[0]
if( dom.className==""){
dom.className="min"
dom.innerText="-"
son[this.index].style.display="block"
}else{
dom.className=""
dom.innerText="+"
son[this.index].style.display="none"
}
}
}
}
//jq写法
$(function(){
$("#list p").click(function(){
var t = $(this).find("span").text()
t=="+"?t="-":t="+"
$(this).next().slideToggle().parent().siblings().find(".son").hide()
$(this).parent().siblings().find("span").text("+")
$(this).find("span").text(t)
})
})
</script>
</body>
</html>
没有测试，不过应该没有问题如果不加id的话，那就遍历dom获得那个h2，不过你必须保证是唯一的或者是可以识别的追问： content.substr(1)！！！！！！！！！关键就是这个content后面可以用substr！！！我就觉得应该有这样的函数才对。这个在jQruey手册里好像没有提到，在网上搜索也基本没有查到。我后来用了一个本办法，就是给加减号外面套了一个span，才能定位到它，不过我还是觉得你这个办法好，因为我没有必要为了第一个字符而用span。多谢。 回答： 嗯，这个是js的原生函数，是字符串类的一个公有方法。JQuery不会再次封装这个的。欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）