<!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. Neighbour-Joining (NJ算法)

    clc;clear all;close all; Distance = [0,2,4,6,6,8; 2,0,4,6,6,8; 4,4,0,6,6,8; 6,6,6,0,4,8; 6,6,6,4,0,8 ...

  2. 编译nginx增加fair模块

    安装必要的软件 ubuntu里是 apt install wget gcc make zlib1g-dev libpcre3-dev 去官网下载最新稳定版的nginx源码 git clone 源码 g ...

  3. 记录第一次使用Vivado——以全加器为例子

    从altera转战xilinx,经典的FPGA到ZYNQ系列,第一站就是先熟悉编译软件Vivado.我就直接跳过软件安装部分了,如有疑问,可以在评论区提出来,我看到了就帮你解答. 首先是是打开界面 然 ...

  4. java中远程调用接口springboot

    package com.kakarote.crm.utils; import cn.hutool.core.util.ObjectUtil; import org.apache.http.client ...

  5. 【老孟Flutter】Stateful 组件的生命周期​

    老孟导读:关于生命周期的文章共有2篇,第一篇是介绍 Flutter 中Stateful 组件的生命周期. 博客地址:http://laomengit.com/blog/20201227/Statefu ...

  6. Solon 1.2.13 发布,开启与 Springboot 的互通

    Solon 一个类似Springboot的微型开发框架.项目从2018年启动以来,参考过大量前人作品:历时两年,3500多次的commit:内核保持0.1m的身材,超高的Web跑分,良好的使用体验. ...

  7. positive-unlabeled (PU) learning

    PULearning的应用场景是,我们可以清晰地确定正样本,但是不能确定负样本,因为它有可能是正样本,只是我们还没有证明. 这时我们可以把这部分不确定的样本称为无标签样本U,加上正样本P来建立模型. ...

  8. 入门oj 6451: The XOR Largest Pair之二

    Description 今天小W用了1s不到的时候完成了这样一个题:在给定的N个整数 A_1,A_2,-,A_N中选出两个进行异或运算,得到的结果最大是多少?正当他志得意满时,L老师亮出了另一个题:给 ...

  9. Turtlebot3新手教程-应用-跟随

    本文针对如何利用Turtlebot3可实现的各种应用进行讲解 具体步骤如下: [Remote PC]安装应用包 cd ~/catkin_ws/src git clone https://github. ...

  10. MyArray框架搭建与实现

    #include<iostream> using namespace std; template<class T> class MyArray { public: //构造函数 ...