实现步骤

1.引入jQuery文件

<script src="../jquery/jquery-1.12.4.js"></script>

2.将写好的标签进行样式修改

css样式：

<style>*{margin: 0 ;padding: 0px;list-style: none;/* 设置缓冲，当样式发生变化时，变化间隔为1s，让样式变化看起来更加的顺滑 */transition: all 1s;}.box{width: 300px;margin: 0 auto;}.box ul{width: 100%;height: 30px;background-color: #E0ECFF;overflow: hidden;}.box ul li{width: 100%;height: 30px;font-size: 25px;text-align: center;line-height: 30px;box-sizing: border-box;border: 2px solid goldenrod;}</style>

body中的标签

<body><div class="box"><ul><li>内容1</li><li>我这里面可以放置图片</li></ul></div><div class="box"><ul><li>内容2</li><li>我这里面可以放置图片</li></ul></div><div class="box"><ul><li>内容3</li><li>我这里面可以放置图片</li></ul></div><div class="box"><ul><li>内容4</li><li>我这里面可以放置图片</li></ul></div>
</body>

效果如下：

3.逻辑代码的书写

<script>//给每个ul下的第二个li设置高度与背景颜色$(".box ul li:odd").css({height:"250px",backgroundColor:"#eaecf1"});//给每个ul绑定一个点击事件$(".box ul").on("click",function(){//当前ul高度为30px时，进行样式修改if($(this).css("height")=="30px"){//所有的ul高度都设置为30px$(".box ul").css({height:"30"})//当前ul高度设置为280px，加上前面css中的transition: all 1s;//让其变化更加的顺滑$(this).css({height:"280"})}else {//当前ul高度不为30px时，将当前ul高度还原为30px$(".box ul").css({height:"30"})}})
</script>

注意：判断时注意每个高度值的修改
效果如下：

利用jQuery制作简易手风琴相关推荐

利用jQuery制作简易弹幕效果
利用jQuery制作简易弹幕效果实现步骤: 1.制作样式 2.逻辑,思路实现步骤: 1.制作样式我们先来看看body中的代码: <body><div class="b ...
利用Unity3D制作简易2D计算器
利用Unity3D制作简易2D计算器标签(空格分隔): uiniy3D 1. 操作流程在unity3DD中创建一个新项目注意选择是2D的(因为默认3D) 在Assets框右键新建C#脚本在新建 ...
利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果,其实利用css同样可以实现导航下拉菜单效果,但自从学习了jQuery后,感觉还是jQuery做起来效果更好.jQuery制作导航下拉菜单,需要用到jQuery方 ...
利用JS制作简易计算器
目的:利用JS制作一个简易的计算器,能够实现简单四则运算要求:三个输入框输入值只能是数字,当输入非数字时提示并清空输入框,利用正则表达式:点击按钮实现计算. 话不多说,贴图为上: 看了效果图,下面就 ...
HTML编程之利用jquery制作长图动画的方法
在网站前端编程开发中,我们经常会遇到需要将图片设置为背景图,当鼠标移入时利用setTimeout定时器去控制改变background-position使得图片逐帧向上移动,鼠标移除则控制向下移动,但要 ...
利用PyQt5制作简易二维码生成器
先来看看效果,主界面大概就是这个样子: 生成成功界面: 生成失败界面: 细节我后面会详细说首先 pip install pyqt5 然后在pycharm中配置pyqt5,详情请参考这里三个界面的搭 ...
利用jQuery制作一个普通网页需要注意多少细节之电梯导航
目录一丶在相应部分显示或者隐藏电梯导航二丶点击电梯导航页面可以滚动到相应内容区域三丶页面滚动到某个内容区域,左侧电梯导航随之变为选中状态节流阀(互斥锁) HTML部分代码 jQuery代码我 ...
利用 Dynamo 制作简易的变截面钢箱梁
关注公众号及时获取文章更新首先使用 Revit 去建立钢结构(正交异性钢箱梁)桥梁简直是一个 "操蛋",尤其是这个桥再给你整个变截面,如果再来个弯桥那就更加雪上加霜了.但如果只是 ...
利用Python制作简易的点赞器
目录一.点赞机器人核心逻辑二.代码层级的实现模拟登录点赞器一.点赞机器人核心逻辑模拟点击操作,触发点赞,喜欢等操作. 实现点赞操作前,还有一步重要的代码实现,模拟登录. 因此,点赞机器人的 ...

利用jQuery制作简易手风琴

利用jQuery制作简易手风琴

实现步骤

1.引入jQuery文件

2.将写好的标签进行样式修改

3.逻辑代码的书写

利用jQuery制作简易手风琴相关推荐

最新文章

热门文章