Jquery实现div折叠伸展

最新推荐文章于 2021-05-30 19:37:56 发布
最新推荐文章于 2021-05-30 19:37:56 发布
阅读量4.1k 收藏
点赞数
文章标签： div jquery javascript function table class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengqiao1999/article/details/5090577
版权

折叠时：

折叠

展开时：

展开

 

Javascript：

 <script language ="javascript" type ="text/javascript">
  function showdiv(divname) {              
           //  alert($("#" + divname).css("display")+divname );
             if ($("#" + divname).css("display") == "none") {       //显示div
                 $("#" + divname).slideDown(1000);
             
                 SetCookie(divname, true);
                
               //  if (document.cookie != "") alert(getCookie("youhui"));
             }
             else if ($("#" + divname).css("display") == "block") {       //隐藏div
             $("#" + divname).slideUp(1000);
             SetCookie(divname, false);
             delcookie(divname);
            // alert(getCookie(divname));
              }
            else  {
                $("#" + divname).slideDown(1000);
                SetCookie(divname, true);
                alert("执行出错");
              }
             }
    </script>

 

<body>

    <table class="style1">
        <tr>
            <td>
                &nbsp;书库管理</td>
            <td align="right">
                <b title="展开|收缩" οnclick="showdiv('bookstore')">&gt;&gt;</b></td>
        </tr>
    </table>
        <div  id="bookstore"  ></div>

</body>

fengqiao1999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
jquery实现网页右侧可展开折叠的DIV特效
06-01
1.实现了扇叶左右展开、合并的效果 2.代码清晰、效果炫酷
Jquery实现的一个DIV层面板的折叠/展开效果
源码好优多
01-08 1万+
Jquery实现的一个DIV层面板的折叠/展开效果_网页代码站(www.webdm.cn) *{margin:0;padding:0;} body { font-size: 14px; line-height: 130%; padding: 60px } #panel { width: 262px; border: 1px solid #0050D0 } .head { paddin
点击div折叠
QDY5945的博客
10-31 515
<!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-wid...
jQuery实现折叠效果
Chris Mao的专栏
06-02 7352
近来工作一直很忙，加之学业上也有好多事情需要处理，一直没腾出时间来发博，自己都觉得不太好意思了！！废话就不多说了，我们直接进入正题。Div折叠，是我在实际工作中实现的一种效果。我想同行的朋友们也有可能会遇到实现这种效果的需求。先上个截图。     jQuery的出现，使得这种效果的实现变得很轻松，很简单，只需要少量的JS代码和CSS样式即可。 CSS代码.a
JQuery实现DIV展开折叠类似Outlook效果
mituan1234567的专栏
07-01 1064
无标题文档 #container{ width:100%; background-color:#999; } #navigate{ width:25%; float:left; background-color:#999; } /*     左侧导航 顶部按钮     */ #navTop {     background-color: grey;    
jQuery实现DIV层收缩展开的方法
12-09
本文实例讲述了jQuery实现DIV层收缩展开的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...
jQuery实现div跟随鼠标移动
12-01
用jQuery实现div随鼠标移动而移动，不是鼠标自身的位置！！而是div相对于之前位置的移动 代码如下：（注意看绿色部分的解释） <!DOCTYPE html> <html> <head> <meta charset="{utf-8}"> &...
Jquery实现Div上下移动示例
12-03
代码如下: $(this).ready(function() { $(“.up”).each(function() { $(this).click(function() { var $tr = $(this).parents(“li”); if ($tr.index() != 0) { $tr.prev().before($tr); } });...
jquery实现div模块轮播切换
10-29
本文将深入探讨如何使用 jQuery 来实现一个div模块的轮播切换效果，这种效果通常用于展示多个图片或内容块，使得用户可以在有限的页面空间内浏览更多的信息。 首先，我们需要在HTML中创建轮播的基础结构。这通常...
jQuery实现的FAQ文字伸展、收缩特效.rar
07-09
jQuery实现的FAQ文字伸展、收缩特效，一段文字目录、内容展开与折叠的效果，可看作是一个非常酷的菜单，怎么说了，就像手风琴菜单一样，点右上角的小按钮可全部展开内容，再点击展开内容中的某一条标题，会继续展开对应的条目，现在这种效果在大网站用的比较多，不少用户也很喜欢这种效果，对于前端开发者，有必要掌握本类效果的编写技巧，希望通过这个国外的实例，让你快速熟悉制作方法。
div折叠经典
04-02
NULL 博文链接：https://pmandy-163-com.iteye.com/blog/1453084
JS+CSS实现DIV层的展开、收缩效果
10-22
主要介绍了JS+CSS实现DIV层的展开、收缩效果，以两个完整实例介绍了JS控制DIV层的展开、收缩效果，感兴趣的小伙伴们可以参考一下
DIV折叠展开DIV折叠展开
07-23
DIV折叠展开DIV折叠展开
html折叠div,纯CSS折叠/展开div
weixin_33904522的博客
05-30 785
我有一个纯CSS可折叠div，它是基于别人的代码，使用：target伪造类。我想设置的是一个有12个问题的页面，当你点击按钮，答案div扩展下面。我不知道如何使多个折叠div元素在这个页面上，没有编写一个额外的CSS。任何人都有建议，如何写这个我的CSS代码最小化？ (即，因此我不必为12个问题中的每一个输入一束唯一选择器)。我不能使用Javascript，因为这是一个wordpress.com网...
JQ 实现菜单伸缩
yjreset的博客
08-24 626
html  目录1                                                        1                               2                               3                             &nbs
展开收起jq
黎成诃月的博客
01-02 467
全部         神经         心血管         肿瘤         心血管         全部         神经         心血管         肿瘤         心血管         全部         神经         心血管         肿瘤         心血管         fu
div的折叠效果
weixin_30546189的博客
07-16 4280
【实例描述】 折叠的div是网页显示内容的重要手段，因为使用折叠效果可以节省页面的空间，同时也提高了页面的美观性。本例学习如何制作一个简单的div折叠效果。 【实现代码】 <script type="text/javascript"> var mh = 30; //最小高度 var step = 1; //每次变化的px量 var ms = 10; //每隔多久循环一...
【jQuery】实现鼠标悬浮时DIV的收缩展开效果
热门推荐
BuptMelody的专栏
05-30 1万+
有的时候我们需要这样一个效果，当鼠标悬浮在一个位置上时，这个悬浮事件会触发一个动画，jQuery实现的动画可以使得整体效果流程优美<!DOCTYPE html> <head> <title>jQuery实现DIV层的收缩展开效果-纵向</title> <meta charset="utf-8"> <script src="C:/jquery/jquery-2.1.4.mi
jquery实现div缩放
最新发布
04-26
jQuery可以通过使用CSS的transform属性来实现div的放效果。具体实现步骤如下： 1. 首先，确保你已经引入了jQuery库。 2. 在HTML中，给需要缩放的div添加一个唯一的id或者class，例如： ```html <div id="myDiv">这是一个需要缩放的div</div> ``` 3. 在JavaScript中，使用jQuery选择器选中该div，并使用`css()`方法设置transform属性为scale，例如： ```javascript $("#myDiv").css("transform", "scale(0.5)"); ``` 这里的0.5表示缩放比例，可以根据需要进行调整。 4. 如果你想要实现动画效果，可以使用`animate()`方法来平滑过渡缩放效果，例如： ```javascript $("#myDiv").animate({ transform: "scale(0.5)" }, 1000); ``` 这里的1000表示动画过渡时间，单位为毫秒。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值