<!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. Python的精髓居然是方括号、花括号和圆括号！

    和其他编程语言相比,什么才是Python独一无二的特色呢?很多程序员会说,缩进.的确,缩进是Python语言的标志性特点,但这只是外在的.形式上的.从语言特性层面讲,Python的特点是什么呢?我尝试 ...

  2. PHP可回调类型

    一些函数如usort和call_user_func()可以作为用户自对应函数做为回调参数,回调函数不止是简单的函数,还可以是对象的方法(类方法),包括静态方法. 用户自定义函数作为回调函数的参数,PH ...

  3. C#访问Access数据库提示未安装ISAM

    解决办法 1.在前面加上Jet OLEDB:,如: Jet OLEDB:Database Password='zt' <add name="ConStrOleDb" conn ...

  4. 搜索引擎优化（SEO）解决方案

      搜索引擎优化(SEO)解决方案 在此之前,希望大家能重新审视搜索引擎,通俗来讲就是我们日常所用的百度.谷歌.搜狗.雅虎等.磨刀不误砍柴工,知己知彼,百战不殆! 一.搜索引擎是什么? 搜索引擎(Se ...

  5. 容器编排系统K8s之访问控制--用户认证

    前文我们聊到了k8s的statefulset控制器相关使用说明,回顾请参考:https://www.cnblogs.com/qiuhom-1874/p/14201103.html:今天我们来聊一下k8 ...

  6. MySQL全面瓦解15：视图

    概述 很多时候,我们会有一些很复杂的数据库操作,比如整合用户的行为数据,那这些数据可能包含用户的餐饮.生活日用.充值消费.交通出行.通讯物流.交通出行.医疗保健.住房物业.运动健康... 基于此,我们 ...

  7. sklearn中的SGDClassifier

    常用于大规模稀疏机器学习问题上 1.优点: 高效 简单 2.可以选择损失函数 loss="hinge": (soft-margin)线性SVM. loss="modifi ...

  8. OneBlog开源博客-详细介绍如何实现freemarker自定义标签

    前言 OneBlog中使用到了springboot + freemarker的技术,同时项目里多个controller中都需要查询一个公有的数据集合,一般做法是直接在每个controller的方法中通 ...

  9. 并发编程之JMM&Volatile（一）

    并发 很多程序员应该对并发一词并不陌生,并发如同一把双刃剑,如果使用得当,可以帮助我们更好的压榨硬件的性能,反之,也会产生一些难以排查的问题.这里,先简单介绍下并发的几个基本概念. 进程与线程 进程: ...

  10. 【递推】P1028数的计算

    题目相关 题目描述 我们要求找出具有下列性质数的个数(包含输入的正整数 n). 先输入一个正整数 n(n ≤1000),然后对此正整数按照如下方法进行处理: 不作任何处理: 在它的左边加上一个正整数, ...