<!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. java基础: ArrayList集合应用, ArrayList增删改查详解,综合java基础实现学生管理系统,

    1.ArrayList 集合和数组的区别 : 共同点:都是存储数据的容器 不同点:数组的容量是固定的,集合的容量是可变的 1.1 -ArrayList的构造方法和添加方法 public ArrayLi ...

  2. 我都xxx岁了，还能继续做开发吗？

    前言 今天纯文字,阅读时间10分钟左右 最近在看一本书<大型网站技术架构:核心原理与案例分析>,可以说是非常枯燥的一本书,在开头几章讲解了网站的发展,介绍了一些架构中的常用名词.虽然有点枯 ...

  3. 【整理】互联网服务端技术体系：高性能之并发（Java）

    分而合之,并行不悖. 综述入口见:"互联网应用服务端的常用技术思想与机制纲要" 引子 并发,就是在同一时间段内有多个任务同时进行着.这些任务或者互不影响互不干扰,或者共同协作来完成 ...

  4. 前后端分离项目获取后端跨控制器获取不到session

    最近做前后端分离项目(.net core web api  +vue)时,后台跨控制器不能获取到session.由于配置的是共享的session.本来以为是共享session出了问题,就在共享sess ...

  5. Failed to process, please exclude the tableName or statementId.--Mybatis-Plus

    多租户多个用户间使用同一套程序,但每个用户之间实现数据隔离 方法一:在 Mapper 的自定义方法上添加注解 @SqlParser(filter = true),在查询的时候不需要添加租户信息 @Sq ...

  6. Java编译执行过程

    在刷软件设计师中级考试的题目,判断关于编译系统对某高级语言进行翻译的叙述的对错.记得刚开始学Java的时候自己就觉得自己对程序的执行过程理解的相当的透彻,但是一对答案,我的小心脏就有点受不了了,特此在 ...

  7. spring乱码处理

    在web.xml添加post乱码filter:CharacterEncodingFilter 2). 对于get请求中文参数出现乱码解决方法有两个: a. 修改tomcat配置文件添加编码与工程编码一 ...

  8. springboot 日期参数前后台转换问题

    方式 一: 在实体类上加@DatetimeFormat与@JsonFormat注解 @DatetimeFormat:将前台日期字符串转换成Date格式 @DateTimeFormat(pattern= ...

  9. ABP框架中短信发送处理，包括阿里云短信和普通短信商的短信发送集成

    在一般的系统中,往往也有短信模块的需求,如动态密码的登录,系统密码的找回,以及为了获取用户手机号码的短信确认等等,在ABP框架中,本身提供了对邮件.短信的基础支持,那么只需要根据自己的情况实现对应的接 ...

  10. kafka的概念

    1.生产者: 生产者发送消息到broker,有三种确认方式(request.required.acks)acks = 0: producer不会等待broker(leader)发送ack .因为发送消 ...