<div class="box">
<div class="item-name">我是名称**1**</div>
<div class="item-list">
<ul>
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
<li><a href="#">内容3</a></li>
<li><a href="#">内容4</a></li>
<li><a href="#">内容5</a></li>
<li><a href="#">内容6</a></li>
</ul>
</div>
<div class="item-name">我是名称**2**</div>
<div class="item-list">
<ul>
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
<li><a href="#">内容3</a></li>
</ul>
</div>
<div class="item-name">我是名称**3**</div>
<div class="item-list">
<ul>
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
<li><a href="#">内容3</a></li>
<li><a href="#">内容4</a></li>
<li><a href="#">内容5</a></li>
</ul>
</div>
</div>
以上是HTML结构,如何让每个UL里的LI只显示一个内容1,并插入一个按钮或链接(就是点击显示),点击该按钮只显示当前点击区域内的内容2-内容N?请问如何用JQUERY来实现呢?(HTML结构中的LI有多有少,不固定的!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="script/jquery_2_1_3/jquery-2.1.3.min.js"></script>
<title>Title</title>
<script>
$(function(){
$('div.box div.item-list ul li:not(:first-child)').hide();
$('div.box div.item-list ul li:first-child')
.append('<button class="btshowen">显示</button>')
.find("button").on('click', function (e) {
if($(this).hasClass("btshowen")){
$(this).removeClass("btshowen");
$(this).text('隐藏');
}else{
$(this).addClass("btshowen");
$(this).text('显示');
}
$(this).parent().nextAll().toggle();
});
});
</script>
</head>
<body>
<div class="box">
<div class="item-name">我是名称**1**</div>
<div class="item-list">
<ul>
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
<li><a href="#">内容3</a></li>
<li><a href="#">内容4</a></li>
<li><a href="#">内容5</a></li>
<li><a href="#">内容6</a></li>
</ul>
</div>
<div class="item-name">我是名称**2**</div>
<div class="item-list">
<ul>
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
<li><a href="#">内容3</a></li>
</ul>
</div>
<div class="item-name">我是名称**3**</div>
<div class="item-list">
<ul>
<li><a href="#">内容1</a></li>
<li><a href="#">内容2</a></li>
<li><a href="#">内容3</a></li>
<li><a href="#">内容4</a></li>
<li><a href="#">内容5</a></li>
</ul>
</div>
</div>
</body>
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
评论
全部评论 (0)