点击显示/隐藏层，点击展开收缩隐藏层

最新推荐文章于 2021-12-20 09:55:05 发布
最新推荐文章于 2021-12-20 09:55:05 发布
阅读量4k 收藏
点赞数
分类专栏： 网站建设 文章标签： class border url function javascript float
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/freejs/article/details/2956078
版权
<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<!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=gb2312" />
<title>隐藏/显示层</title>
<style type="text/css">
<!--
body{
background: #FFF;
color: #000;
font: normal 12px 宋体,arial,sans-serif;
margin: 0;
padding: 0;
text-align: left;
}

div,form,ul,ol,li,span,p {
border: 0;
margin: 0;
padding: 0;
}

/*清除float*/
.clear{
clear: both;
font-size: 1px;
visibility: hidden;
}

/*分类标题*/
.class_title{
margin: 0 auto;
width: 504px;
height: 17px;
border: 1px solid #9EB1C0;
padding: 1px;
background:url(http://www.east-dragon.cn/files/sw/images/title_bg.gif);
}

.class_title h2{
margin: 0;
padding: 2px 0 2px 18px;
height: 12px;
color: #16387C;
font: bold 13px 宋体,arial,sans-serif;
cursor:pointer;
letter-spacing: 2px;
text-align: left;
}

#tabclass1{
background:url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif) 6px center no-repeat;
}

/*分类列表（模块一）*/
#class_cnt1{
background: url(http://www.east-dragon.cn/files/sw/images/class_cntbg.gif) left bottom repeat-x;
border: solid #9EB1C0;
border-width: 0 1px 1px 1px;
height: 287px;
margin: 0 auto;
text-align: left;
width: 506px;
display: block;
  overflow:hidden;
}

#class_cnt1 p{
   margin:0;
   padding:3px;
   line-height:150%;
}
-->
</style>

<script language="javascript" type="text/javascript">
<!--
//=======================================================
//函数名称：getObject(objectId)
//          参数objectId:控件的ID值
//函数功能：获得控件的ID值
//返 回 值：ture(获得ID值) false(获取ID失败)
//=======================================================
function getObject(objectId) {
    if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
    } else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
    } else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
    } else {
return false;
    }
}

// 显示列表框
function displayList(){    
      var h = getObject('class_cnt1').offsetHeight;  // 内容容器class_cnt1的初始高度（这时高度为：0）
      var max_h = 287; // 容器的最大高度
      
      var anim = function(){
    h += 50; // 每次递增50像素
    //如果增加的高度开始超过容的最大高度
    if(h >= max_h){ 
            getObject('class_cnt1').style.height = "287px"; // 工期高度为287px(因为我们只希望容器这么高)
            getObject('tabclass1').style.backgroundImage="url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif)"; // 让图片标签改变背景       
            if(tt){window.clearInterval(tt);} // 如果高度在每2毫秒递减，则清楚改行为（如果不清楚，程序将一直自动运行高度每2毫秒递减）
    }
    else{ // 如果增加中的容器高度没有超过287px
                getObject('class_cnt1').style.display="block"; // 让容器可见（这样我们才能够看到容器在增高的效果）
                getObject('class_cnt1').style.height = h + "px"; // 容器高度不断的以50px递增
    }
    }
   
  var tt = window.setInterval(anim,2);  // 设置每2毫秒循环一次（每2毫秒，运行一次anim[容器的高度递减50px]）
}

// 隐藏列表框
function hiddenList(){
       var h = getObject('class_cnt1').offsetHeight; // 内容容器class_cnt1的初始高度（这时高度为：287px）
   var anim = function(){
     h -= 50; // 每次递减50像素
     
     if(h <= 5){
             getObject('class_cnt1').style.display="none"; // 内容容器不可见（当容器高度小于5px）
           getObject('tabclass1').style.backgroundImage="url(http://www.east-dragon.cn/files/sw/images/tab_drop2.gif)"; 
           if(tt){window.clearInterval(tt);}
       }
       else{
           getObject('class_cnt1').style.height = h + "px"; // // 容器高度不断的以50px递减 
       }
   }
     
   var tt = window.setInterval(anim,2); // 设置每2毫秒循环一次（每2毫秒，运行一次anim[容器的高度递减50px]）
}

//=======================================================
//函数名称：showClassList()
//函数功能：隐藏-显示级分类列表框（class_cnt1）
//返 回 值：无
//=======================================================
function showClassList(){
   // 如果内容容器为不可见的display:none
   if(getObject('class_cnt1').style.display == "none"){ 
       displayList(); // 显示内容框
   }
   else{ // 如果内容容器为可见的display:block
     hiddenList(); // 隐藏内容框
 }
}
-->
</script>
</head>
<body>
<div class="class_title">
 <h2 id="tabclass1" οnclick="showClassList()" title="隐藏/显示信息">分类信息</h2> 
</div> 
<div id="class_cnt1">
<p>
1111111<br />
111111111<br />
1111111<br />
111111111<br />
1111111<br />
111111111<br />
1111111<br />
111111111<br />
1111111<br />
111111111<br />
1111111<br />
111111111<br />
111111111<br />
</p>
</div>
</body>
</html>
piperzero
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js文字超出规定长度隐藏，点击展开和收缩
09-30
可以随便添加该功能模块的数量和规定显示的字数
点击显示隐藏的方法
m0_62285976的博客
08-08 376
我们需要引入jquery-3.5.1.min.js ，如果没有，请翻看我的下一篇博客。我这里下面是一张图片，如果是其他的东西也可以用，直接套公式就可。点击左上方返回键外面这层阴影像左上方移动至消失。这段代码一定要卸载body里面优先执行。最后得到的效果就是这样的啦。在body下写入如下代码。然后我们开始简单的布局。okk，到这里就完啦。...
html点击显示隐藏层,js 点击图标隐藏层,再次点击显示层
weixin_36212334的博客
06-03 302
gt;headscript type=text/javascriptfunction changeBody(index){switch(index){case 1:{document.getElementById('iDBody1').style.display = ;document.getElementById('iDBody2').style.display = none;document....
点击按钮显示隐藏层 和 切换按钮同时显示多个隐藏层
weixin_34174105的博客
04-13 455
按钮点击显示隐藏层（再次点击按钮则隐藏层关闭）： HTML部分： <button type="button" id="show" onclick="showHidden()">点我显示隐藏层</button> <div id="hidden" style="display:none">我是隐藏层。</div> JS部分： <scrip...
html点击显示隐藏层,Jquery 点击按钮显示和隐藏层的代码
weixin_35910782的博客
06-03 279
代码：#choice_list_district{ height:50px;}#tab td{cursor:pointer;}$(function () {//绑定事件处理$("#choice_list_district a").click(function (e) {if ($("#divObj").css("display") == "none") {e.stopPropagation();/...
点击一个按钮显示div，点击div之外的地方div隐藏，点击div之内的地方div不隐藏
信念堤岸
11-24 1万+
当点击按钮后显示隐藏层，满足鼠标在div里操作不隐藏，在外边点击会消失的功能。                                 逻辑上主要是阻止浏览器的冒泡                                             //点击#btnClick时要阻止冒泡，否则.pop是不显示的，         //因为冒泡了，会执行到下面
jQuery基于Bootstrap.js表格行展开收缩隐藏代码.zip
01-02
这是一款相当实用的jQuery基于Bootstrap.js表格行展开收缩隐藏代码，用来显示隐藏表格行内容，点击后箭头指向也会改变。
点击问题展开隐藏的答案JS代码
05-27
点击问题展开隐藏的答案JS代码，对于内容太多的问答式的网页，正好可以使网页更精简，方便网友浏览，可以对CSS进行编辑，控制标题和展开栏所在栏的宽度和文字大小
易语言鼠标移动按钮展开隐藏收缩特效源码
05-28
易语言鼠标移动按钮展开隐藏收缩特效源码。@⑧⑧⑧。 。
jQuery表格行展开隐藏代码
06-24
jQuery表格行展开隐藏代码是一款基于Bootstrap.js表格插件制作的table表格行展开收缩隐藏效果代码。
js实现点击展开隐藏效果（实例代码）
10-17
本篇文章小编给大家带来一篇关于JS实现点击展开点击隐藏的效果代码内容，有兴趣的朋友参考下。
JS+CSS实现DIV层的展开、收缩效果
10-22
主要介绍了JS+CSS实现DIV层的展开、收缩效果，以两个完整实例介绍了JS控制DIV层的展开、收缩效果，感兴趣的小伙伴们可以参考一下
点击li显示隐藏div层
weixin_44575390的博客
07-20 1241
第一种方法 $(document).ready(function(e) { $(“li的id或class”).click(function(e) { $(“div层的id或class”).toggle(); }); }); 第二种方法 $(document).ready(function(e) { $(".li的id或class").click(function(e) { if( $(div层的i...
JQuery 弹出窗口，(div显示与隐藏)，隐藏层半透明
houyanhua1的专栏
12-18 3538
#bgDiv { /*隐藏背景层*/ position: absolute; /*绝对定位*/ left: 0px; top: 0px; background-color: black; opacity: 0.2; /*设置不透明度，即可以看到层
page31-layui点击显示和隐藏页面层
qq_53028155的博客
12-20 667
page31-layui点击显示和隐藏页面层 第一步：效果：点击已入住的房间,会弹出图片中的页面层 第二步：在代码中把内容设置display:none 隐藏起来 第三步：在content中写上$("#xxx")，便可弹出layui页面框 第四步:大家可以打开layui手册,查找看看 ...
简单js控制div的显示与隐藏
热门推荐
冰蒂的博客
02-24 5万+
这样的例子有很多；但是这个最简单最容易理解； 以下两个页面代码粘贴复制就可以看效果，拿去玩吧！1. div初始隐藏页面<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/
用jquery怎么实现点击显示，再一次点击隐藏
Belores的博客
12-18 3万+
//点击a标签，轮流显示和隐藏 点击这里 $(function(){ $('#lol').click(function(){//点击a标签 if($('#timo').is(':hidden')){//如果当前隐藏 $('#timo').show();//那么就显示div }else{//否则 $('#timo').hide();//就隐藏div }
实现点击显示、隐藏效果
weixin_44545643的博客
05-16 7979
实现点击显示、隐藏效果 开发工具与关键技术：VS、MVC 作者：黎官凤 撰写时间：2019/05/12 不管在前端还是在后端页面布局都是需要的。页面布局说简单又不简单，说难又不难，这个应该就是看个人的了。在Mvc中做项目页面布局可以说是比较简单的。在页面布局中实现点击显示、隐藏的功能，可能有些人觉得可以使用插件，但是插件的使用是固定的。就比如说有些插件是要使用ul li才能使用插件里面的...
用flutter Visibility自定义显示和隐藏备注信息，点击按扭时只对应指定的显示层和隐藏，一对一的控制，不同时展开全部备注，只显示其中一条
最新发布
06-11
当用户点击一个备注信息的展开/收缩图标时，我们会通过setState方法更新对应的布尔变量，从而控制该备注信息的可见性。通过这种方式，我们可以实现一对一的控制，而不是展开/收缩所有备注信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值