展开、收起div的jQuery代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <a href="javascript:;" id="toggle" target="_self">展开 代码中的:; 请自行更改成英文的冒号和分号再运行</a>
<div id="content" style="display: none;"><p>隐藏内容 www.daimabiji.com.com<p><p>隐藏内容<p></div>
<script type="text/javascript" src="http://www.daimabiji.com/statics/js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#toggle").click(function() {
$(this).text($("#content").is(":hidden") ? "收起" : "展开");
$("#content").slideToggle();
});
});
</script>
 </body>
</html>

  

时间: 2024-08-06 12:52:25

展开、收起div的jQuery代码的相关文章

jQuery 侧边栏展开收起效果

jQuery文件: <script type="text/javascript">    $(function(){                var tit= $(".boxBar dl dt");        var con= $(".boxBar dl dd");        var list=$("dt:gt(4)");        var conBox=$("dd:gt(4)"

JS+CSS实现可展开/收起的QQ在线客服悬浮代码

<!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> <title>JS+CSS实现可展开/收起的QQ在线客服

HTML-003-模拟IDE代码展开收起功能简单示例

当先我们在日常的编程开发工作中使用编程工具(例如 Eclipse.Sublime 等等)都有相应的代码折叠展开功能,如下图所示,极大的方便了我们的编码工作. 同时,我们在日常的网页,尤其的广大的博客网站的源码展示部分,都采用了此种显示方式,如下图所示(示例引用位置:008-Selenium 操作下拉列表实例-Select): 这么做的意义何在呢?我觉得其实际应用有如下两种: 内容的展示和隐藏:将用户最关心.感兴趣的内容展示给用户,若用户想继续深入了解,则可通过点击展示或隐藏按钮达到查看.隐藏内容

Jquery 展开收起

需求:点击展开显示详细内容,收起后隐藏内容 实现: Index.cshtml 显示 ... ... <tr> <td> <a asp-action="Edit" asp-route-id="@item.Nid" asp-route-lcid="@item.Lcid">编辑</a> | <a asp-action="Delete" asp-route-id="@it

时间日期的jQuery代码

获取时间日期的jQuery代码:         function getNewtime(){                 var newtime = new Date();                 var yy = newtime.getYear().toString();                 yy = '20' + yy.substring(yy.length -2) ;                 var mm =newtime.getMonth();     

10个常用的JQUERY代码片段

jQuery被用在无数个网站的页面上,它是使用最为广泛的javascript库之一.jQuery的受欢迎程度的部分是它的简单性.它能够通过简单的语句完成大部分复杂的工作.有许多jQuery片段我们在每天不断重复的使用,这里总结了10条你必须知道的jQuery代码片段. 返回顶部 <a class="top" href="#">Back to top</a> // Back To Top $('a.top').click(function(){

编写更好的jQuery代码(转)

这是一篇关于jQuery的文章,写到这里给初学者一些建议. 原文地址:http://flippinawesome.org/2013/11/25/writing-better-jquery-code/ 现在已经有很多文章讨论jQuery和JavaScript的性能问题,然而,在这篇文章中我计划总结一些提升速度的技巧和一些我自己的建议来改善你的jQuery和JavaScript代码.更好的代码意味着更快的应用程序,快速渲染和反应性意味着一个更好的用户体验. 首先,我们要记住最重要的一点是:jQuer

50个必备的实用jQuery代码段

本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中! 1. 如何修改jQuery默认编码(例如默认UTF-8改成改GB2312): $.ajaxSetup({ ajaxSettings:{ contentType:"application/x-www-form

动态等比例调整图片大小的jQuery代码

动态等比例调整图片大小的jQuery代码:有时候图片的大小和尺寸是位置,如果上传后,任由其自然伸展,很有可能导致网页变形,所以要认为的控制图片的尺寸,当然也不能够太粗暴,直接定死图片的尺寸,这样可能会导致图片变形,所以要进行等比例缩放,下面就是一段能够实现此功能的代码.代码如下: <script type="text/javascript"> jQuery(window).load(function(){ jQuery("div.product_info img&