<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery便利多个相同的class,点击显示隐藏图标,显示及隐藏其下的内容</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<style>
body{
background-color: #FFFFFF;
letter-spacing: 2px;
}
.box{
padding-top: 100px;
width: 50%;
margin: 0 auto;
}
ul li ul{
margin: 20px 0 20px 40px;
}
.img_sh{
margin: 20px 0;
}
.img_sh img{
float: left;
padding-right: 10px;
}
</style>
<script>
//页面加载完毕后加载
window.onload = function () {
//遍历class类名叫img_sh的li
$(".img_sh").each(function () {
//将遍历到的类赋给li
var li = $(this);
//执行操作,li的子元素p标签里的子元素类名为jia的加号图片点击后执行函数
li.children("p").children(".jia").click(function () {
//点击的自身加号图片要隐藏
li.children("p").children(".jia").hide(500);
//点击完的加号图片要隐藏,而相反类名为jian的减号图片要显示,toggle的作用是取反(既显示或隐藏)
li.children("p").children(".jian").toggle(500);
//下面的ul列也是取反
li.children("ul").toggle(500);
})
//同理
li.children("p").children(".jian").click(function () {
li.children("p").children(".jian").hide(500);
li.children("p").children(".jia").toggle(500);
li.children("ul").toggle(500);
})
})
}
</script>
<div class="container-fluid">
<div class="box ">
<ul class="list-unstyled">
<li class="img_sh">
<p>
jq测试
<img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: none">
<img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: block" >
</p>
<ul class="list-unstyled" style="display: block">
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
</ul >
</li>
<li class="img_sh">
<p>
jq测试
<img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: block" >
<img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: none">
</p>
<ul class="list-unstyled" style="display: none">
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
</ul >
</li>
<li class="img_sh">
<p>
jq测试
<img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: block" >
<img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: none">
</p>
<ul class="list-unstyled" style="display: none">
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
</ul >
</li>
<li class="img_sh">
<p>
jq测试
<img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: block" >
<img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: none">
</p>
<ul class="list-unstyled" style="display: none">
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
</ul >
</li>
<li class="img_sh">
<p>
jq测试
<img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: block" >
<img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: none">
</p>
<ul class="list-unstyled" style="display: none">
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
<li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
</ul >
</li>
</ul>
</div>
</div>
</body>
</html>
方法二:
$(".iconfontBtn").each(function () {
var iconfontBtn = $(this);
iconfontBtn.click(function(){
// alert('qwe');
var isHidden = $('.iconfontHidden').css('display')
if (isHidden == 'block') {
// $('#iconfontHidden').css('display','none');
// $(".iconfontBtn").next('div').hide(500);
// iconfontBtn.next('div').hide(500);
iconfontBtn.next('div').slideToggle(500);
// $(".iconfontHidden").closest('div').hide(500);
}else if(isHidden == 'none'){
// iconfontBtn.next('div').toggle(500);
iconfontBtn.next('div').slideToggle(500);
// $(".iconfontBtn").next('div').toggle(500);
// $(".iconfontHidden").closest('div').toggle(500);
// $('#iconfontHidden').css('display','block');
}
})
})