一 : jquery实现下拉菜单的手风琴效果

本文实例为大家分享了jquery实现下拉菜单手风琴展示的具体代码，供大家参考，具体内容如下

html代码

 <div class="site-nav">  <ul class="site-accordion">  <li>  <div class="tab-head">学科领域</div>  <ul class="tabs-list">  <li>机械电子</li>  <li>生物工程</li>  <li>能源环保</li>  <li>化学化工</li>  </ul>  </li>  <li>  <div class="tab-head">省份地区</div>  <ul class="tabs-list">  <li>陕西省</li>  <li>江苏省</li>  <li>山东省</li>  <li>河南省</li>  </ul>  </li>  <li>  <div class="tab-head">经费范围</div>  <ul class="tabs-list">  <li>50万~100万</li>  <li>100万~200万</li>  <li>200万~500万</li>  <li>500万以上</li>  </ul>  </li>  <li>  <div class="tab-head">需求状态</div>  <ul class="tabs-list">  <li>状态1</li>  <li>状态2</li>  </ul>  </li>  </ul> </div> 

css代码

 .site-accordion>li{  margin-top: 13px; } .site-accordion>li .tab-head{  width: 160px;  height: 40px;  line-height: 40px;  text-align: center;  color: #9c9c9c;  font-size: 16px;  background: #f2f2f2; } .site-accordion>li .tab-head:hover{  background: #292d48; } .site-accordion>li .tab-head:after{  content: '';  border: 5px solid #4F5160;  border-color: #4F5160 transparent transparent transparent;  margin-top: 20px;  position: relative;  top: 10px;  left: 5px; } .site-accordion>li .tabs-list{  display: none; } .site-accordion>li .tabs-list li{  width: 160px;  height: 40px;  line-height: 40px;  text-align: center;  color: #9c9c9c; .site-accordion>li .tabs-list li:hover{  background: #f2f2f2; } 

jQuery代码

 $('.tab-head').click(function(){  $(this).next().slideToggle();  $('.tab-head').css('background','#FFFFFF');  $(this).css('background','#292d48');  }) 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持61阅读。

二 : jQuery+zTree加载树形结构菜单

由于项目中需要设计树形菜单功能，于是百度找相关资料，发现zTree方面的资料不少，觉得挺不错，而且zTree官方也有API文档，介绍的非常详细，经过一番捣腾之后，终于给弄出来了，所以便记下来，也算是学习zTree的一个总结吧。

zTree的介绍：

1、zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件
2、zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载
3、采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
4、兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
5、支持 JSON 数据
6、支持静态 和 Ajax 异步加载节点数据
7、支持任意更换皮肤 / 自定义图标（依靠css）
8、支持极其灵活的 checkbox 或 radio 选择功能
9、提供多种事件响应回调
10、灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
11、在一个页面内可同时生成多个 Tree 实例
12、简单的参数配置实现 灵活多变的功能


核心的函数和属性介绍：

核心：zTree(setting, [zTreeNodes])
这个函数接受一个JSON格式的数据对象setting和一个JSON格式的数据对象zTreeNodes，从而建立 Tree。

核心参数：setting
zTree 的参数配置都在这里完成，简单的说：树的样式、事件、访问路径等都在这里配置

setting 举例:

var setting = { showLine: true, checkable: true };

因为参数太多，具体参数详见zTreeAPI
核心参数：zTreeNodes
zTree 的全部节点数据集合，采用由JSON对象组成的数据结构，简单的说：这里使用Json格式保存了树的所有信息

1、zTree官方网站：http://www.ztree.me/v3/main.php#_zTreeInfo

在官网能够下载到zTree的源码、实例和API，其中作者pdf的API写得非常详细
关于zTree的节点数据的获取方式分为静态（直接定义）的和动态（后台数据库加载）的

具体的配置步骤：

第一步 —— 引入相关文件

<script type="text/javascript" src="js/jQuery/jquery-1.9.1.min.js"></script><script type="text/javascript" src="ztree/js/jquery.ztree.core-3.5.min.js"></script><script type="text/javascript" src="ztree/js/jquery.ztree.excheck-3.5.min.js"></script>

备注：
1、第一个（zTreeStyle.css）是zTree的样式css文件，引入了这个，才能呈现出树形的结构样式，
2、第二个（jquery-1.9.1.min.js）是jQuery文件，因为要用到，
3、第三个（jquery.ztree.core-3.5.min.js）则是zTree的核心js文件，这个是必须的，
4、最后一个（js/jquery.ztree.excheck-3.5.min.js）则是拓展文件，主要用于单选框和复选框的功能，因为用到了复选框，所以也要要引进来。

第二步 —— 相关配置（具体的详细配置，请到官网参考详细API文档）

var zTree;var setting = {view: {dblClickExpand: false,//双击节点时，是否自动展开父节点的标识showLine: true,//是否显示节点之间的连线fontCss:{'color':'black','font-weight':'bold'},//字体样式函数selectedMulti: false //设置是否允许同时选中多个节点},check:{//chkboxType: { "Y": "ps", "N": "ps" },chkStyle: "checkbox",//复选框类型enable: true //每个节点上是否显示 CheckBox },data: {simpleData: {//简单数据模式enable:true,idKey: "id",pIdKey: "pId",rootPId: ""}},callback: {beforeClick: function(treeId, treeNode) {zTree = $.fn.zTree.getZTreeObj("user_tree");if (treeNode.isParent) {zTree.expandNode(treeNode);//如果是父节点，则展开该节点}else{zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选，再次单击取消勾选}}}};

第三步 —— 节点数据加载，呈现树形结构

1、html页面，直接放一个ul就可以，数据最终会自动加载到这个ul元素里面

2、js中进行数据的加载

一，静态方式（直接定义）

var zNodes =[ { id:1, pId:0, name:"test 1", open:false}, { id:11, pId:1, name:"test 1-1", open:true}, { id:111, pId:11, name:"test 1-1-1"}, { id:112, pId:11, name:"test 1-1-2"}, { id:12, pId:1, name:"test 1-2", open:true}, ]; $(document).ready(function(){$.fn.zTree.init($("#user_tree"), setting, zNodes);});function onCheck(e,treeId,treeNode){var treeObj=$.fn.zTree.getZTreeObj("user_tree"),nodes=treeObj.getCheckedNodes(true),v="";for(var i=0;i
二、动态方式（从后台数据库加载）
/** * 页面初始化 */$(document).ready(function(){onLoadZTree();});/** * 加载树形结构数据 */function onLoadZTree(){var treeNodes;$.ajax({async:false,//是否异步cache:false,//是否使用缓存type:'POST',//请求方式：postdataType:'json',//数据传输格式：jsonurl:$('#ctx').val()+"SendNoticeMsgServlet?action=loadUserTree",//请求的action路径error:function(){//请求失败处理函数alert('亲，请求失败！');},success:function(data){//console.log(data);//请求成功后处理函数treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes}});var t = $("#user_tree");t = $.fn.zTree.init(t, setting, treeNodes);}

java后台加载数据代码：
1、定义tree的VO类，这个也可以不用定义，由于我要用到其他操作，方便一些（www.61k.com）
/** * zTree树形结构对象VO类 * * @author Administrator * */public class TreeVO {private String id;//节点idprivate String pId;//父节点pId I必须大写private String name;//节点名称private String open = "false";//是否展开树节点，默认不展开public String getId() {return id;}public void setId(String id) {this.id = id;}public String getpId() {return pId;}public void setpId(String pId) {this.pId = pId;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getOpen() {return open;}public void setOpen(String open) {this.open = open;}}

2、查询数据库，并且sql的结构字段也要是id,pId,name,open(可选)这种格式（注意：pId中间的I必须大写），然后将结果封装到TreeVO类中。
/** * 加载树形结构数据 * @param request * @param response * @throws IOException */public void loadUserTree(HttpServletRequest request, HttpServletResponse response) throws IOException{WeiXinUserService weixinUserService = new WeiXinUserServiceImpl();Listuser_tree_list = weixinUserService.getUserTreeList();String treeNodesJson = JSONArray.fromObject(user_tree_list).toString();//将list列表转换成json格式 返回PrintWriter out = response.getWriter();//利用Json插件将Array转换成Json格式 out.print(treeNodesJson);//释放资源out.close();}
这里就完成了整个操作了，誒，文笔不好，组织语言自然就不怎么样了，大家见谅！共同学习，共同成长！
三 : jQuery+CSS实现多级下拉菜单
随着计算机网络、通信技术的迅速发展，特别是Internet的发展应用，使人们的行为方式受到巨大的冲击及影响。电子商务作为一种崭新的商务运作方式，带来了一次新的产业革命，这场革命的最终结果将人类带入了信息经济时代。电子商务网站出现如雨后春笋，但中国电子商务的发展较之发达国家尚处于起步阶段， 
今天电子商务网站我们随处可见，如淘宝、拍拍、百度有啊……。电子商务在发展，网站技术也在不段的更新。由于电子商务网站的产品和种类的不段增加，以往的一级下拉菜单已经远不能满足现有电子商务网站发展了，多级下拉菜单是今后电子商务网站的新趋势。
 
一个好的菜单，能为电子商务网站增色不少。下面我就用jQuery+CSS来制做一款多级的下拉菜单。
 
 
jQuery+CSS实现多级下拉菜单
 
演示地址：http://www.56mp.cn/upload/mega-dropdowns/
 
 HTML部分：
 
就像我的所有导航教程一样，首先创建一个无序列表。
 
 
<ul id="topnav">
    <li><a href="http://www.56mp.cn" class="home">Home</a></li>
    <li><a href="http://www.56mp.cn" class="products">Products</a></li>
    <li><a href="http://www.56mp.cn" class="sale">Sale</a></li>
    <li><a href="http://www.56mp.cn" class="community">Community</a></li>
    <li><a href="http://www.56mp.cn" class="store">Store Locator</a></li>
</ul>
 
 
CSS部分：
 
由于我们的下拉菜单将使用绝对定位，所以一定要添加一个相对定位的列表项。
 
 
ul#topnav {
margin: 0; padding: 0;
float:left;
width: 100%;
list-style: none;
font-size: 1.1em;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
position: relative; 
}
ul#topnav li a {
float: left;
text-indent: -9999px; 
height: 44px;
}
ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; } 
ul#topnav a.home {
background: url(nav_home.png) no-repeat;
width: 78px;
}
ul#topnav a.products {
background: url(nav_products.png) no-repeat;
width: 117px;
}
ul#topnav a.sale {
background: url(nav_sale.png) no-repeat;
width: 124px;
}
ul#topnav a.community {
background: url(nav_community.png) no-repeat;
width: 124px;
}
ul#topnav a.store {
background: url(nav_store.png) no-repeat;
width: 141px;
}
 
 
 
子菜单HTML：
 
添加好子菜单后，每个无序列表要嵌套相应的类值。
 
 
无序列表嵌套相应的类值
 
 
<ul id="topnav">
    <li><a href="#" class="home">Home</a></li>
    <li>
    <a href="#" class="products">Products</a>
        <div class="sub">
            <ul>
                <li><h2><a href="#">Desktop</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Laptop</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Accessories</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
            <ul>
                <li><h2><a href="#">Accessories</a></h2></li>
                <li><a href="#">Navigation Link</a></li>
                <li><a href="#">Navigation Link</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#" class="sale">Sale</a></li>
    <li><a href="#" class="community">Community</a></li>
    <li><a href="#" class="store">Store Locator</a></li>
</ul>
 
 
子菜单CSS:
 
 
ul#topnav li .sub {
position: absolute;
top: 44px; left: 0;
background: #344c00 url(sub_bg.png) repeat-x; 
padding: 20px 20px 20px;
float: left;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
display: none; 
}
ul#topnav li .row {
clear: both;
float: left;
width: 100%;
margin-bottom: 10px;
}
ul#topnav li .sub ul{
list-style: none;
margin: 0; padding: 0;
width: 150px;
float: left;
}
ul#topnav .sub ul li {
width: 100%; 
color: #fff;
}
ul#topnav .sub ul li h2 { 
padding: 0;  margin: 0;
font-size: 1.3em;
font-weight: normal;
}
ul#topnav .sub ul li h2 a {
padding: 5px 0;
background-image: none;
color: #e8e000;
}
ul#topnav .sub ul li a {
float: none;
text-indent: 0; 
height: auto; 
background: url(navlist_arrow.png) no-repeat 5px 12px;
padding: 7px 5px 7px 15px;
display: block;
text-decoration: none;
color: #fff;
}
ul#topnav .sub ul li a:hover {
color: #ddd;
background-position: 5px 12px ;
}
 
 
 
用jQuery设置鼠标悬停效果
 
对于那些谁不熟悉jQuery的，你可以看看他们的网站。
 
调用jQuery的文件
 
 
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 
 
设置自定义配置和触发功能
 
 
//Set custom configurations
var config = {
     sensitivity: 2, 
     interval: 100, 
     over: megaHoverOver, 
     timeout: 500, 
     out: megaHoverOut 
};

$("ul#topnav li .sub").css({'opacity':'0'}); 
$("ul#topnav li").hoverIntent(config);
 
 
转载时请注明出处。此信息出自逸诚科技：http://www.56mp.cn
  
   本文标题：jquery下拉菜单-jquery实现下拉菜单的手风琴效果 
 本文地址：  http://www.61k.com/1117338.html