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

最新推荐文章于 2024-07-19 03:08:33 发布
最新推荐文章于 2024-07-19 03:08:33 发布
阅读量4.6k 收藏 2
点赞数
分类专栏： JavaScript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JXL9910/article/details/82107809
版权 

<!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');
                    }
                })
        })
JXL666888
关注
专栏目录
jQuery便利多个相同的class，点击显示隐藏图标，显示及隐藏其下的内容
luckybuling
07-27 4648
这里使用了bootstrap 而jQuery的遍历标签 each 和事件hide（）、show（）、toggle(); 直接上代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Com
jquery根据相同class遍历所有的使用该class的标签
热门推荐
ppwwp的专栏
08-12 1万+
function checkfxjg() { if(tbtime == null || tbtime ==""){ $(".tabs-title").each(function () { if($(this).html() == "水浒传"){ $(this).parent().pare...
jquery 遍历 class
最新发布
weixin_41513711的博客
07-19 58
jQuery 遍历 class 科普 jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在本文中，我们将探讨如何使用 jQuery 来遍历具有特定 class 的元素。 遍历 class 的基本概念 在 HTML 中，class 属性用于定...
jQuery遍历
回忆
05-16 546
1jQuery遍历之children()方法 jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系） 理解节点查找关系： 1 代
jQuery遍历相同的class,并为鼠标指向的class单独进行动画
方寸间的博客
11-12 259
jQuery遍历相同的class,并为鼠标指向的class单独进行动画 $(function () { // 以下内容很重要 $('.thumbnail').each(function (index) { $(this).mouseenter(function () { $(".shadow_up:eq(" + index + ")").ad...
jq遍历移除class
大海无量的博客
07-19 1311
<li class="headerRight_li"> <div class="flexCell"> <div class="headerDayDate headerDayDa...
jQuery点击淡入淡出显示图片特效.zip
07-11
本项目“jQuery点击淡入淡出显示图片特效”利用jQuery的强大力量，创建了一个吸引人的用户体验，当用户点击一个小图标的圆圈时，大图会在页面上淡入淡出，展示详细内容。 首先，`index.html`是项目的主网页文件，它...
jQuery+CSS3实现的点击图标显示详细信息的动态特效源码.zip
11-17
这个源码示例通常用于网页设计，当用户点击一个图标时，会展示与该图标相关的详细信息，这种效果可以增加用户体验的互动性和吸引力。以下是对这个项目中关键知识点的详细解释： 1. **jQuery**：jQuery是一个流行的...
jQuery密码显示隐藏登录表单特效代码
03-20
在开发Web应用时，用户...总的来说，"jQuery密码显示隐藏登录表单特效代码"是一个实用的前端开发示例，展示了如何利用jQuery实现常见但关键的用户交互功能，同时也提醒我们在追求用户体验的同时，不能忽视数据安全。
Bootstrap显示或隐藏密码jquery插件
12-10
在压缩包中，我们看到有多个HTML文件，如index.html、mt.html、v2.html和v3.html，这些可能是插件的示例页面，用于展示如何在不同的Bootstrap版本中使用该插件。readme.html通常包含了关于插件的详细使用说明和安装...
jquery 遍历类对象方法
炉火纯青
11-11 1138
$(".myClass").each(function(){ alert($(this).html()) });
jquery 遍历 hasClass(class)
KAXU
12-26 453
hasClass(class) 匹配元素集合中至少有一个元素包含特殊样式‘class’，那么就返回‘true’，否则就返回‘false’ &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &...
实习小结九：jQuery中根据this对象控制多个同一类名标签
wn_hello的小宇宙
08-07 2114
今天，弄了一个早上的这个破玩意，一弄完就想着，一定要写下来，写下来……主要问题是，实现六个同名的a标签同时hover能有一样的效果。html代码：<div class="selected<?php echo $else_index;?> want-to"> <a class="active<?php echo $else_index;?> active" href="/review/comp
Jquery 同个类名中点击的显示其他隐藏的效果
weixin_30429201的博客
12-13 500
页面的DOM结构如下： <tr> ...... <td><a href="javascript:void(0)" class="c_detail2">查看详情</a></td> ...
jquery 遍历class为xxx的对象
weixin_34195142的博客
08-28 1581
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery遍历class,移除对应的class元素
JnGg366的博客
01-04 1063
$("#field0042_inner").click(function(){ $("#field0042_scnt .cap4-scontent__item").each(function () { console.log($(this).html()); console.log($(this).text()); console.log($(this).index()); if ('审批中' === $(this).text().trim()) { $(this)...
多个class类相同的元素的点击事件（使用动态加载的）
weixin_44352179的博客
04-16 2855
注意如果类标签是动态加载的，这里则不能用 onclick方法进行绑定，如： //动态添加div标签类 for (var i = 0; i < clini_symlist.length; i++) { $(".father").append('<div class="sym_item">'+i+'</div>' } 使用onclick是不能实现的，点击进不去...
JQuery实现动态加载的多个相同class元素的点击事件
Rose✿留白ق೨的博客
12-09 1862
话不多说，请直接复制下面这段代码到HTML页面，然后用浏览器打开。 <input type="button" value="删除" class="delBtn" id="1"/> <input type="button" value="删除" class="delBtn" id="2"/> <input type="button" value="删除" class="delBtn" id="3"/> <script src="https://cdn.bootcss.
jQuery实现360导航图标拖动排序代码分享
4. **CSS定位**: 为了实现拖动排序，每个图标元素的CSS `position`属性被设置为`absolute`，这样它们可以相对于其最近的非静态定位祖先元素进行定位。`left`和`top`属性用于控制元素在页面上的精确位置。 5. **事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值