[原创 js] 点击展开关闭效果

最新推荐文章于 2024-05-06 11:31:25 发布
最新推荐文章于 2024-05-06 11:31:25 发布
阅读量209 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/cly84920/archive/2008/04/25/4427213.html
版权

     因为工作中老是需要这个功能，本来也不是很麻烦，就把它写成一个可重用的函数好了。代码很简单。

//===========================点击展开关闭效果====================================

function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;
var openTip = oOpenTip || "";
var shutTip = oShutTip || "";
if(targetObj.style.display!="none"){
    if(shutAble) return;
    targetObj.style.display="none";
    if(openTip && shutTip){
     sourceObj.innerHTML = shutTip; 
    }
} else {
    targetObj.style.display="block";
    if(openTip && shutTip){
     sourceObj.innerHTML = openTip; 
    }
}
}

函数一共有5个参数，作用如下：

oSourceObj：点击事件的对象，类型为DOM对象，或者对象的id；

oTargetObj：展开关闭的对象，类型为DOM对象，或者对象的id；

shutAble：对象是否可关闭，类型为布尔值,可选，默认为false；

oOpenTip：对象关闭时，点击源的文字，类型为String,可选；

oShutTip：对象打开时，点击源的文字，类型为String,可选.

================================= 下面放demo ==================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#box,#box2,#box3,#box4{padding:10px;border:1px solid green;} 
</style>
<script type="text/javascript">
//===========================点击展开关闭效果====================================

function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){
var sourceObj = typeof oSourceObj == "string" ? document.getElementById(oSourceObj) : oSourceObj;
var targetObj = typeof oTargetObj == "string" ? document.getElementById(oTargetObj) : oTargetObj;
var openTip = oOpenTip || "";
var shutTip = oShutTip || "";
if(targetObj.style.display!="none"){
    if(shutAble) return;
    targetObj.style.display="none";
    if(openTip && shutTip){
     sourceObj.innerHTML = shutTip; 
    }
} else {
    targetObj.style.display="block";
    if(openTip && shutTip){
     sourceObj.innerHTML = openTip; 
    }
}
}
</script>
<title>无标题文档</title>
</head>

<body>
<p><a href="###" οnclick="openShutManager(this,'box')">点击展开</a></p>
<p id="box" style="display:none">
    这里面放的是box的内容.
</p>
<p><a href="###" οnclick="openShutManager(this,'box2',true)">点击展开</a></p>
<p id="box2" style="display:none">
    这里面放的是box的内容.
</p>
<p><a href="###" οnclick="openShutManager(this,'box3',false,'点击关闭','点击展开')">点击展开</a></p>
<p id="box3" style="display:none">
    这里面放的是box的内容.
</p>
<p><button οnclick="openShutManager(this,'box4',false,'点击关闭','点击展开')">点击展开</button></p>
<p id="box4" style="display:none">
    这里面放的是box的内容.
</p>
</body>
</html>

转载于:https://www.cnblogs.com/cly84920/archive/2008/04/25/4427213.html

weixin_30718391
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现展开关闭效果
alm1968的博客
08-08 282
效果图呈上： 一开始我是用display:block和none实现的，后来发现不实用，因为用这种方法需要单独把需要展开的那部分放到一个标签里，然后对这个标签进行显示隐藏操作，这样的特别不利于维护和输入，综合对比下采用了overflow:hidden和visible的方法实现的。有了思路，写起来就很简单了，“展开”、“关闭”2个字要始终显示在所有可见区域的下方，这是一个...
简易的点击展开/关闭效果(原生JS版和JQ版)
weixin_34032827的博客
06-11 140
  &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="gbk"/&gt; &lt;title&gt;简易的点击展开/关闭效果(原生JS版和JQ版)&lt;/title&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs
2024年Web前端最新点击页面其他部分关闭当前下拉框_js点击空白处关闭下拉面板，【性能优化实战】
最新发布
2401_84446919的博客
05-06 340
打开全栈工匠技能包-1小时轻松掌握SSR两小时精通jq+bs插件开发生产环境下如歌部署Node.js开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】网易内部VUE自定义插件库NPM集成谁说前端不用懂安全，XSS跨站脚本的危害webpack的loader到底是什么样的？两小时带你写一个自己loader
JS实现点击展开、点击关闭的效果实例代码
iteye_2433的博客
04-09 1145
可扩展的简易点击展开/关闭效果,分别用原生网页特效和jquery实现.使用方法及相关解释,请参见源码. 另,授人以鱼,不如授人以渔.我写的只是一个原型,提供一个思路一种方法.注释中我也注明了,如果你想要酷炫的效果,你可以根据自己的实际需求扩展. jquery $(function(){ var $title = $('div.jqdemo');//找到要...
点击打开隐藏层的JS
thewebcode
07-03 151
&lt;script type="text/javascript"&gt; //=点击展开关闭效果= function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oShutTip){ var sourceObj = typeof oSourceObj == "string" ? document.getEle...
vue.js 实现点击展开收起动画效果
10-18
主要介绍了vue.js 实现点击展开收起动画效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js实现点击展开隐藏效果（实例代码）
10-17
在JavaScript中实现点击展开隐藏效果是一种常见的交互设计，它增强了用户界面的动态性和用户体验。本文将详细介绍如何通过JavaScript实现这一功能，并提供一个具体的代码实例。 首先，我们需要理解基础的HTML和CSS...
js实现点击向下展开的下拉菜单效果代码
10-23
主要介绍了js实现点击向下展开的下拉菜单效果代码,涉及javascript鼠标事件控制页面元素样式变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
javascript实现table单元格点击展开隐藏效果(实例代码)
10-20
主要介绍了javascript实现table单元格点击展开隐藏效果的实例代码讲解，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
原生JS仿QQ阅读点击展开、收起效果
10-20
主要为大家详细介绍了原生JS仿QQ阅读点击展开、收起效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js文字超出规定长度隐藏，点击展开和收缩
09-30
可以随便添加该功能模块的数量和规定显示的字数
鼠标点击展开关闭层效果特效代码
03-20
标题“鼠标点击展开关闭层效果特效代码”涉及的是前端网页开发中的交互设计技术，主要集中在JavaScript或者CSS3实现的动态效果。这种效果通常用于网页的菜单、折叠面板、模态框等元素，允许用户通过鼠标点击来显示或...
JavaScript实现鼠标点击后层展开效果的方法
10-24
主要介绍了JavaScript实现鼠标点击后层展开效果的方法,可实现点击文字缓慢展开层的效果,具有一定参考借鉴价值,需要的朋友可以参考下
JS实现可点击展开与关闭的左侧广告代码
10-23
主要介绍了JS实现可点击展开与关闭的左侧广告代码,通过鼠标onClick事件调用自定义javascript函数实现页面元素及样式的显示与隐藏效果,非常简单实用,需要的朋友可以参考下
jquery页脚点击展开折叠弹窗效果
06-10
一款代码非常容易看懂的jquery广告特效，点击可以折叠亦可收缩，默认是在网页左下角。 可调整JS中$('.main').css('left','-262px');变量，来改变窗口的位置，默认为500的速度，亦可根据实际需要调节，简单方便 注：...
html 展开 折叠,HTML实现点击展开和收起
weixin_33601398的博客
05-30 3727
#box,#box2,#box3,#box4{padding:10px;border:1px solid green;}//===========================点击展开关闭效果====================================function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenTip,oS...
Vue3：集成wangEditor富文本编辑器
2401_84411822的博客
04-29 300
webpack的loader到底是什么样的？两小时带你写一个自己loader。打开全栈工匠技能包-1小时轻松掌握SSR。谁说前端不用懂安全，XSS跨站脚本的危害。网易内部VUE自定义插件库NPM集成。生产环境下如歌部署Node.js。两小时精通jq+bs插件开发。服务器端图片上传接口。
javaScript实现点击展开和收起的功能
WaterArticle
07-21 6681
javaScript实现点击展开和收起的功能。
JavaScript实现卷轴展开关闭效果
06-10
可以通过添加或移除CSS类名来实现JavaScript实现卷轴展开关闭效果。首先，需要有一个包含卷轴内容的容器元素和一个用于触发展开和关闭的按钮，例如： ```html <div class="scroll-wrapper"> <div class="scroll-content"> <!-- 卷轴内容 --> </div> </div> <button class="toggle-btn">展开/关闭</button> ``` 然后，通过CSS设置容器元素的高度为0，使卷轴内容默认隐藏，例如： ```css .scroll-wrapper { height: 0; overflow: hidden; transition: height 0.3s ease-out; } ``` 接着，需要通过JavaScript来监听按钮的点击事件，并通过添加或移除CSS类名来实现卷轴的展开和关闭，例如： ```javascript const toggleBtn = document.querySelector('.toggle-btn'); const scrollWrapper = document.querySelector('.scroll-wrapper'); toggleBtn.addEventListener('click', () => { if (scrollWrapper.classList.contains('open')) { scrollWrapper.classList.remove('open'); scrollWrapper.style.height = 0; } else { scrollWrapper.classList.add('open'); scrollWrapper.style.height = scrollWrapper.scrollHeight + 'px'; } }); ``` 在这段代码中，我们通过classList来判断容器元素是否已经展开，如果已经展开则移除open类名并将高度设为0，否则添加open类名并将高度设为容器元素的滚动高度，即scrollHeight。 最后，需要通过CSS设置容器元素的过渡效果，使展开和关闭效果更加平滑，例如： ```css .scroll-wrapper { height: 0; overflow: hidden; transition: height 0.3s ease-out; } ``` 这样，就完成了JavaScript实现卷轴展开关闭效果的代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值