jQuery实现的页面详情展开收起功能示例

2024-08-02 08:27:40

本文实例讲述了jQuery实现的页面详情展开收起功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery实现页面详情展开收起</title>
<style>
.detailpd { padding-top:10px; }
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
// 显隐项目介绍详情
 $(function view_details_click(){
  $("#detailmain_a").bind('click',function(){
   if($("#deal_info_box").is(":hidden")){
    $("#deal_info_box").show();
    $(this).find("#view_details").text("收起详情");
    $(this).find(".fa").removeClass("fa-angle-right").addClass("fa-angle-down");
   }
   else{
    $("#deal_info_box").hide();
    $(this).find("#view_details").text("展开详情");
    $(this).find(".fa").removeClass("fa-angle-down").addClass("fa-angle-right");
   }
  });
  $("#detailmain_aa").bind('click',function(){
   $("#deal_info_box").hide();
   $("#view_details").text("展开详情");
  });
 });
</script>
</head>
<body>
 <p class="detailpd">
  项目详情介绍:
 </p>
 <a class="detailmain_a" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" id="detailmain_a">
  <span id="view_details">展开详情></span><i class="fa fa-angle-right"></i>
 </a>
 <div class="deal_info_box pb15" id="deal_info_box" style="display:none">
 <!-- 此处引入要展开的具体文件内容 -->
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  123<br/>
  <a class="detailmain_aa tc" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" id="detailmain_aa" style="width:130px;display:block;margin:0 auto">
   <span class="theme_fcolor" id="view_detailss">收起详情</span><i class="fa fa-angle-up theme_fcolor"></i>
  </a>
 </div>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun测试运行效果如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery动画与特效用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery插件cxSelect多级联动下拉菜单实例解析

随着电商的火爆,这多级联动下拉菜单体现的更加充分,最明显的就是地址的多级联动下拉选择,所以这里就简单的分享一下 jQuery cxSelect 多级联动下拉菜单 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市.商品分类等联动菜单. 列表数据通过 AJAX 获取(需要在服务器环境运行),也可以使用变量自定义,数据内容使用 JSON 格式. 提供国内省市县数据(数据来源:basecss/cityData Date: 2014.03.31) 个人一直都有习惯,当有新知识点需要学
精心挑选的15个jQuery下拉菜单制作教程

今天本文就为大家挑选了25个非常好的 jQuery 下拉菜单制作教程和示例. Slide Down Box Menu with jQuery and CSS3 ( 演示 | 下载 ) Fancy Drop Down Menus Using CSS and JQuery. ( 演示 | 下载 ) Sliding Jquery Menu ( 演示 | 下载 ) Create Simple Dropdown Menu Using jQuery ( 演示 | 下载 ) Designing the Dig
jQuery下拉菜单的实现代码

jQuery是一款流行已久的Javascript框架,确实很好用.今天我给大家介绍jquery下拉菜单的实现代码,具体代码如下所述: <!DOCTYPE html> <head lang="en"> <meta charset="UTF-8"> * { padding: 0; margin: 0; ul { list-style: none; .wrap { width: 730px; height: 50px; margin:
jQuery模拟select实现下拉菜单功能

用jquery模拟一淘上面的搜索下拉的功能,利用css3做箭头的动画效果. JS代码: /* * 模拟搜索下拉select * 默认调用方式:$(el).setSelect({ * optionList: [], //这里是下拉的选项,如['aa','bb'] * hiddenInput: '#optionHidden', //隐藏的input获取选中后的值,供表单提交时传值 * getOption: '#sOptionBtn', * callback: function(option){} *
jquery实现先淡出再折叠收起的动画效果

本文实例讲述了jquery实现先淡出再折叠收起的动画效果.分享给大家供大家参考.具体如下: 这里使用jquery实现先淡出再折叠形变的动画效果,动画折叠展开一个层,先淡出,然后Div又发生形状的改变,整体不错哦. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio
jQuery使用slideUp方法实现控制元素缓慢收起

本文实例讲述了jQuery使用slideUp方法实现控制元素缓慢收起功能的技巧.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function()
jQuery实现的导航下拉菜单效果

本文实例讲述了jQuery实现的导航下拉菜单效果.分享给大家供大家参考,具体如下: 1.效果如图所示: 2.html代码: <div id="navigation"> <ul> <li><a href="#">首页</a></li> <li><a href="#">衬衫</a> <ul> <li><a hr
jQuery实现的导航下拉菜单效果示例

本文实例讲述了jQuery实现的导航下拉菜单效果.分享给大家供大家参考,具体如下: <!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"> <h
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能

上面的人要hui admin 做页面,本人前端比较菜,这框架也没用过. 因为是动态添加数据 .表也没有,..然后子菜单列表只能通过字符串拼接的方式显示. (伪造的)数据是传过来了发现这个框架的点击菜单,子菜单滑出的效果触发不了,应该是封装了吧..反正不会引用.就自己写了个点击事件(,列表格式还是参照模板). ①:请求数据+ul拼接比较糙,两边icon 无力回天,不过功能是实现了 $.ajax({ url:'/type/reportType', data:{"token":getC
jQuery实现的checkbox级联选择下拉菜单效果示例

本文实例讲述了jQuery实现的checkbox级联选择下拉菜单效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <script language="JavaScript" src="jq
基于jquery实现三级下拉菜单

本文实例为大家分享了jquery三级下拉菜单的具体实现代码,供大家参考,具体内容如下在写这个的时候,首先要捋顺思路.点一个菜单的时候,其他的要闭合,点一级菜单的时候,二三级菜单要闭合,等等. 大致代码如下: <body> <aside> <ul class="one"> <li> <a href="#" class="a">目录A</a> <ul class=&quo
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果

前言最近几天在公司做了个后台管理系统的小模块,其中有个功能是实现复选框的全选和全不选,用bootstrap和jQuery来实现. 效果是这样: 因为是内部用,样式也不要求太好看,直接上代码. 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

jQuery实现的页面详情展开收起功能示例

相关推荐

随机推荐