当前位置:
  1. 首页 »
  2. 笔记 »
  3. 正文

Tab手风琴弹出菜单遇到的问题,diaplay:block与JQ slideToggle 冲突,显示多次效果

零分 1,874

在设计手风琴Tab展开收起菜单时,遇到了一个问题,第一次点击时,总是出现多次效果。

display:block,元素可见

slideToggle,当display:block可见时,显示JQ动画效果slideup,当display:none,不可见时,显示效果slideDown,

因为还要设计右边显示展开收起的图标(“+”可以展开,“-”,可收起),默认需要显示第一个菜单展开的效果。所以需要给一个CSS active,当已经展开时添加active,收起时移除active。

因为初次加载时需要展开第一个,所以第一个的初始值有active。

第一次使用时,贪图方便,就把display:block的值也写入了active,那么问题来了。

当点击切换时,就出现了这种情况。

当tab已经是展开状态的时候,点击一次,会出现收起、展开两次效果。

经过多次的研究折腾,才发现了这个问题。原因可能是因为,加入/移除active的时候,也顺便改变了display的显示和隐藏的状态,有个时间差。

比如:当tab是展开状态,点击时,JQ反馈的是display是显示状态,需要移除active,active又带有display的css样式,一旦移除active,display又处于隐藏状态。

slideToggle,带有过渡动画时间,而移除/添加active是瞬间的事情,所以就会出现2次效果。

明白了原因,最后将图标css和display的CSS分开写,就不再出现2次效果​了。

标签:

网站设置开灯(亮模式/白天)和关灯(暗模式/黑夜)效果

在很早之前,这个效果叫做开灯/关灯,现在叫做白天/黑夜,曾经有那么一段时间没有看到过这种效果,现在又很多网站/APP都喜欢这种切换白天/黑夜模式。 实现效果:设置2套或者多套色调模板,和之前的那种换皮肤大差不差。所以博客新主题也设置了这么一个效果,样式布局基本没怎么改变,后台设置页升级了一下,很多东西都不再“写死”,可以自由设置! 白天模式效果: 黑夜模式效果: 感觉黑夜的色调比较好看。 总体涉及到的原理: 1、设计2套或者多套CSS样式,可以在body里添加一个class,后面保留class/ID样式名称不变,在不同的样式里给设计一个区域,通过body里的class名调用不同的样式CSS。
笔记 2,416

CSS并排,左边不抢空间,右边固定大小

CSS并排布局: flex,position,float,最近很少用float,感觉总是控制不好它。 最好用的布局,flex,右边设置好一个固定宽度,左边使用grow:1,或者width:calc(100% - 固定宽度)。 另外一种就是position,父层设置 position:relative,padding-right:右边的固定宽度,左边设置width:100%,右边设置position:absolute,固定在右边。 现在习惯用flex,flex,并排的两个层会自动自适应高度
笔记 1,588

JQ加载分页时,加载内容图片的lazyload懒加载效果

今天遇到一个问题,就是用JQ AJAX加载下一页时,加载内容的图片无法正常使用懒加载... 出现两种情况: 1、无法加载图片,在AJAX加载的异步内容,无法加载图片 2、整页图片刷新,在AJAX内添加懒加载 $("img.lazy").lazyload({effect:"fadeIn"}) 一整个页面的图片都会重新加载一次,这并不是想要的理想效果。 于是就去搜索解决方案 可惜:现在的搜索引擎,很多内容都已经无法搜索到了,这也许就是翻墙也要去ChatGPT的原因之一吧? 短视频时代,已经有很少人在写文字了吗?能翻到的东西还是很早之前的,翻来覆去的被复制黏贴,以前经常关注的几个博客站,也都不更新了
笔记 1,847

CSS中的变量VAR()函数,CSS中var()的使用

var() 函数用于插入 CSS 变量的值。CSS 变量可以访问 DOM,这意味着您可以创建具有局部或全局范围的变量,使用 JavaScript 来修改变量,以及基于媒体查询来修改变量。使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中,而不必一遍又一遍地复制和粘贴相同的颜色。 var() 函数的语法 var(name, value) name:必需。变量名(以两条破折号开头)。value:可选。回退值(在未找到变量时使用)。注释:变量名称必须以两个破折号(–)开头,且区分大小写! var() 如何工作 首先:CSS 变量可以有全局或局部作用域。 全局变量可以在整个文档中进行
笔记 1,713

CSS控制段落首字突显

CSS控制每段第一个字的样式: *{margin:0;padding:0;} p{width:150px;color:#000;font-size:1em;} p:first-letter{font-size:2.5em;padding-right:5px; text-transform:uppercase;}/*段落第一个字母样式 :first-letter ,另外text-transform:uppercase; 是将英文字母转换成大写格式输出 */ /* :first-letter样式中还可以使用行内元素的vertical-align属性,以控制同行内容的对齐方式,字体比较小时能派上用
笔记 2,507