<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title></title>

        <link rel="stylesheet" href="css/bootstrap.min.css" />

        <style type="text/css">

            *{

                padding: 0;

                margin: 0;

            }

            .footer{

                width: 300px;

                height: 400px;

                border: 1px solid #000000;

                margin: 30px;

                padding: 30px;

            }

            .footer-group{

                list-style: none;

                border-bottom: 1px solid #ccc;

                cursor: pointer;

            }

            .list-unstyled{

                text-indent: 1em;

            }

            .footer-title{

                display: flex;

                justify-content: space-between;

                padding: 6px;

            }

            .footer-title .ims{

                width: 18px;

            }

            .list-unstyled{

                display: none;

            }

            .list-unstyled li{

                padding: 5px 0;

            }

            .current{

                transform: rotate(180deg);

            }

        </style>

    </head>

    <body>

        <div class="footer">

            <ul>

                <li class="footer-group">

                    <div class="footer-title">

                        <strong>走进tenxx久</strong>

                        <img class="ims" src="img/bottom.png"/>

                    </div>

                    <ul class="list-unstyled">

                        <li>关于我们</li>

                        <li>主营业务</li>

                    </ul>

                </li>

                <li class="footer-group">

                    <div class="footer-title">

                        <strong>加入我们</strong>

                        <img class="ims" src="img/bottom.png"/>

                    </div>

                    <ul class="list-unstyled">

                        <li>txsdf猎影</li>

                        <li>校园招聘</li>

                        <li>社会招聘</li>

                    </ul>

                </li>

                <li class="footer-group">

                    <div class="footer-title">

                        <strong>商务合作</strong>

                        <img class="ims" src="img/bottom.png"/>

                    </div>

                    <ul class="list-unstyled">

                        <li>商务合作</li>

                    </ul>

                </li>

            </ul>

        </div>

        <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            $(function(){

                //点击显示隐藏并切换图标

                $(".footer-title").click(function(){

                    //当前父级下的子元素展开

                    $(this).parent().children(".list-unstyled").slideDown();

                    //当前父级下其他子元素收起

                    $(this).parent().siblings().children(".list-unstyled").slideUp();

                    //当前下的子元素添加class

                    $(this).children(".ims").addClass('current')

                    //当前父级下其他.ims删除class

                    $(this).parent().siblings().find(".ims").removeClass('current')

                })

            })

        </script>

    </body>

</html>

效果预览：

jQuery 点击当前展开其他隐藏的更多相关文章

  1. jquery点击非div区域隐藏div

    点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框

  2. jQuery点击页面其他部分隐藏下拉菜单

    一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面 ...

  3. jquery点击区域显示或隐藏DIV,点击非该DIV的地方隐藏该DIV

    <div class="Content_top"> <div class="Reserve"> <h3><span c ...

  4. jQuery点击收缩展开滑动显示内容竖直手风琴代码

    <div class="position"> <div class="positiontop"> <span class=&quo ...

  5. jQuery点击div其他地方隐藏div

    $(document).bind("click",function(e){ var target = $(e.target); ){ $("#regionlist&quo ...

  6. jquery点击按钮显示和隐藏DIv

    function changeDisplay() { if ($("#btnShow").attr("value")== "添加附件") { ...

  7. jquery点击页面其他位置隐藏div

    $("#btnAdd").on('click', function (e) { $("#setUp").toggle(); $(document).one('c ...

  8. 点击页面其它地方隐藏div所想到的jQuery的delegate

    在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...

  9. jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...

随机推荐

  1. 【Azure Redis 缓存】Linux虚拟机中使用6380端口(SSL方式)连接Azure Redis (redis-cli & stunnel)

    问题描述 在Azure Redis的官方文档中,介绍了在Windows下,如何通过redis-cli.exe连接Redis, 包含如何配置stunnel使得通过 6380,SSL方式连接到Redis ...

  2. 深度实战玩转算法， Java语言7个经典应用诠释算法精髓

    深度实战玩转算法,以Java语言主讲,通过7款经典好玩游戏,真正将算法用于实际开发,由算法大牛ACM亚洲区奖牌获得者liuyubobobo主讲,看得见的算法,带领你进入一个不一样的算法世界,本套课程共 ...

  3. 常见的JS手写函数汇总（代码注释、持续更新）

    最近在复习面试中常见的JS手写函数,顺便进行代码注释和总结,方便自己回顾也加深记,内容也会陆陆续续进行补充和改善. 一.手写深拷贝 <script> const obj1 = { name ...

  4. 使用freetype来显示中文汉字和英文字符

    这里我们用到了freetype.进入官网http://savannah.nongnu.org/download/freetype/ 中下载最新的版本2.7的源代码和文件.freetype-2.7.ta ...

  5. Python 爬虫系列

    爬虫简介 网络爬虫 爬虫指在使用程序模拟浏览器向服务端发出网络请求,以便获取服务端返回的内容. 但这些内容可能涉及到一些机密信息,所以爬虫领域目前来讲是属于灰色领域,切勿违法犯罪. 爬虫本身作为一门技 ...

  6. VScode中配置C++运行环境

    目录 VScode中配置C++运行环境 1. 哪些插件 2. 配置开始 3. 编写代码并运行 VScode中配置C++运行环境 关于安装mingw的教程,网络上已经有很多了,这里不再赘述,下面就看VS ...

  7. linux下用户管理命令、用户组管理命令

    useradd 添加新用户 1．基本语法 useradd 用户名                   (功能描述:添加新用户) useradd -g 组名 用户名      (功能描述:添加新用户到某 ...

  8. 风炫安全web安全学习第三十节课 命令执行&代码执行基础

    风炫安全web安全学习第三十节课 命令执行&代码执行基础 代码执行&命令执行 RCE漏洞,可以让攻击者直接向后台服务器远程注入操作系统命令或者代码,从而控制后台系统. 远程系统命令执行 ...

  9. 十八般武艺玩转GaussDB(DWS)性能调优：SQL改写

    摘要:本文将系统介绍在GaussDB(DWS)系统中影响性能的坏味道SQL及SQL模式,帮助大家能够从原理层面尽快识别这些坏味道SQL,在调优过程中及时发现问题,进行整改. 数据库的应用中,充斥着坏味 ...

  10. 二进制格式 PLY 模型文件的读取与渲染

    PLY 文件头部信息: ply format binary_little_endian 1.0 comment VCGLIB generated element vertex 13469 proper ...