点击元素之外收缩元素伸展的内容

最新推荐文章于 2021-10-11 16:27:06 发布

青岛有点甜

最新推荐文章于 2021-10-11 16:27:06 发布

阅读量202

点赞数

本文链接：https://blog.csdn.net/weixin_41266588/article/details/89509839

版权

废话不多说，直接上代码

$(document).click(function(e){
   var target = $(e.target)；
   if(target.closest(".aa").length != 0) return; //aa代表点击触发内容伸缩的开关
   $(".bb").hide(); //bb代表展开的内容的载体
   })

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

青岛有点甜

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

js实现盒子的拉伸

小屋博客

10-13

8076

拉伸盒子前面我们实现了将一个盒子就行移动（拖拽），在这里我们将对盒子本身的大小进行操作，将盒子拉宽或者拉高。首先我们也是布局，给出一个盒子。 *{margin: 0;padding: 0;border: none;} body{padding: 100px;} #box{width: 150px;height: 100px;backgrou

前端面试-CSS

wanglu458512的博客

09-19

2979

一、CSS基础 CSS选择器及其优先级对于选择器的优先级：标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高；如果优先级相同，则最后出现的样式生效；继承得到的样式的优先级最低；通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用

1 条评论您还未登录，请先登录后发表或查看评论

transition属性实现div点击拉伸，再点击收回效果

baidu_33163851的博客

09-28

6446

html> html lang="en"> head> meta charset="UTF-8"> title>004title> style> div { width: 80px; height: 50px; background-color: #90FF8E; transition: width 4s; /* 改变宽度，时间4

属性动画点击自定义View实现拉伸收缩的效果

chl520521的博客

04-25

889

public class StartActivity extends AppCompatActivity { private int i=10; private Handler handler=new Handler(); private int a=0; ImageView icon; ImageView gt; ImageView copy; Imag...

前端开发：弹出框点击弹出框以外的地方，收起弹出框

Bii_yu的博客

07-12

1462

:close-on-click-modal="true"

VUE 点击事件（父子层级元素点击时踩坑记录）

qq243179521的博客

10-15

2348

https://www.cnblogs.com/liangjing-yy/p/9013061.html

Flexbox 的弹性容器与弹性子元素

- 灵活性：通过flex容器和flex子元素的属性设置，可以轻松实现多种布局效果。 - 自适应性：灵活地适应不同屏幕尺寸和设备。 - 简洁性：相比传统布局方式，Flexbox可以用更少的代码实现复杂的布局效果。 ## 1.3 弹性...

CSS3 Flex 伸缩盒模型布局

爱人BT的博客

12-26

382

一、Flex 布局是什么？ CSS3引入了一种新的布局模式——Flexbox布局，即伸缩盒模型布局（Flexible Box）模型。用来提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或者动态的，这里简称Flex。 CSS3引入的布局模式Flex布局，主要思想是让容器有能力让其子项目能够改变其宽度、高度、顺序，以最佳的方式填充可用空间。Flex容器会...

style flex

最新发布

07-27

1. flex-grow：设置元素的伸展比例，默认值为0。如果容器中有多个元素，并且它们的flex-grow值不为0，那么它们将按照比例分配剩余的空间。 2. flex-shrink：设置元素的收缩比例，默认值为1。如果容器中的空间不足，...

HTML/CSS笔记

小李的博客

10-11

451

思维导图 HTML 网页的基本结构 <!DOCTUPE HTML> 文档声明，声明当前文档版本迭代网页的版本 HTML4 XHTML2.0 HTML5 ... 文档说明文档说明用来告诉浏览器当前的版本进制二进制十进制八进制十六进制字符编码所有的数据在计算机中储存时都是以二进制形式存储的，文字也不例外。所以一段文字在存储到内存时，都需要转换为二进制编码当我们读取这段文字时，计算机会将编码

python展开列表元素

qq_40178291的博客

09-30

1248

将列表内的所有元素，包括子列表，都展开成一个列表。 def spread(arg): ret = [] for i in arg: if isinstance(i, list): ret.extend(i) else: ret.append(i) return ret spread([1,2...

JS 实现收缩列表

Bug制造者

10-11

1682

html:代码 <div id="menu-container"> <h1>新闻管理</h1> <ul> <li>发布新闻</li> <li>新闻列表</li> <li>回收站</li&

仅仅使用元素的属性实现菜单的收缩与展开JavaScript

leng12ling的专栏

03-19

329

无标题页 #category { width: 100px; border-color: #c5c6c4; border-style: solid; border-width: 0px 1px 1px 1px; } #category h1

flex布局属性的伸展、收缩、基准属性

qq_43238599的博客

01-26

998

flex-frow 伸展解决问题：当所要求的范围超出后,如何分配空间？在分配的内容大于需要的空间后，要对剩余的空间进行分配可以设置1,以及其他数字，不能是负数 1、如果每一个子集设置的是相同的数字，则是平均分配 2、不同的数值，则按照数值的大小分配剩余的空间 flex-shrink 收缩解决问题：当范围不够怎么办？指咋爱不够的情况下，如何分配目前的空间例如：...

jQuery点击页面其他任意地方关闭弹框

xiaoxiaohui520134的博客

07-21

8951

测试弹框点击展示区 $(".click").click(function(e){ if($(".show").hasClass("allhide")){ $(".show").hid

CSS3让div自动收缩及属性选择器

bailin710258的专栏

12-06

3070

两个css3的实例，一个是对div添加背景图片并让其自动收缩；一个是属性选择器的使用。

css-可伸缩框属性（Box）-1.1

caishu1995的博客

06-13

840

下面是按照盒子模型展示后的一些属性。在使用以下代码前不要忘了加这个哦 display: -moz-box; /* Firefox */ display: -ms-flexbox; /* IE10 */ display: -webkit-box;/* Safari、Opera 以及 Chrome */ display: box; /* W3C */ IE不支持box哦！...

vue点击伸展收缩切换效果

Luckyzhoufangbing的博客

03-05

974

<template> <div id="app"> <div class="item" v-for="(item, index) in dataList" :key='index' @click='shrink(item, index)' > <div class="titl...