jQuery遍历多个相同的class,点击显示隐藏图标,显示及隐藏其下的内容


<!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>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</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>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</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>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</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>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</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>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li>
                    <li>●&nbsp 吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</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');
                    }
                })
        })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值