jquery 状态切换及页面拼接
2015-03-23 10:08
288 查看
大家好:
由于一个样式的问题搞了半天,现在终于整好了,给大家分享一下!
效果:
$(".list_keshi_checked").find(".allow_right").css("transform","rotate(90deg)"); }); });});//隐藏点击的目录function yincang(number){ //给页面元素添加样式 var DisPlay = $("#div" + number).css("display"); if( DisPlay != "none"){ $('.keshi_child').slideUp(); //隐藏// $('.keshi_child').empty();
//数据清空 } else { $('.keshi_child').slideUp(); //隐藏 $("#div" + number).slideToggle(); //当前的数据隐藏显示}}//点击一级目录查询二级目录(查询出二级后 存放)function gotoDepartment(id,number) {yincang(number);// $("#div" + number).empty(); //清空之前的数据var tmp=$("#div" + number).attr("tmp");if(tmp==0){var
path = "<%=request.getContextPath()%>";$.post(path+'/mobile/department/departmentListByPid', {pid:id }, function (data) //回传函数 { if(data.length>0){ var div = ""; for(var i=0;i<data.length;i++){div += "<a class='keshi_child_list_a' href='javascript:;' onclick='toDoc("+data[i].id+")'>"+
data[i].cnName+"</a>"; } $("#div" + number).append(div); $("#div" + number).attr("tmp",1); }else{ alert("无二级科室"); } } );}}//跳转其他列表function toDoc(id){var ctx = "<%=request.getContextPath()%>"; location.href=ctx+"/mobile/doctorInfo/toListPage?deptbId="+id;}</script></html>
由于一个样式的问题搞了半天,现在终于整好了,给大家分享一下!
效果:
<span style="font-size:14px;"><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/view/common/tags.jsp"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="no-cache" http-equiv="Cache-Control"> <link rel="stylesheet" href="<%=request.getContextPath()%>/css/base.css" type="text/css"> <title>列表</title> </head> <body> <input type="hidden" id="flag" value=""> <header> <h2 class="top_text"><i class="icon icon_ha"></i>北京市医院管理局官方唯一就医平台</h2> </header> <section class="sec_keshi"> <ul class="nav_keshi"> </span><span style="font-size: 14px; font-family: Arial, Helvetica, sans-serif;"><!--一级循环处 --></span><span style="font-size:14px;"> <strong><span style="color:#ff0000;"><c:forEach var="departmentInfoList" items="${departmentInfoList}" </span><span style="color:#009900;"> begin="0" varStatus="stat"</span><span style="color:#ff0000;">> <li class="list_keshi"> <div class="title" onclick="gotoDepartment(${departmentInfoList.id},'${stat.count}')" id="yijimulu${stat.count}"> ${departmentInfoList.cnName}<em class="allow_right"></em> </div> <div class="keshi_child" id = "div${stat.count}"</span><span style="color:#33cc00;"> style="display: none" tmp="0"</span><span style="color:#ff0000;">> <!-- 二级拼接处 --> </div> </li> </c:forEach></span></strong> </ul> </section> </body> <script src="<%=request.getContextPath()%>/js/jquery-1.11.1.min.js"></script> <script src="<%=request.getContextPath()%>/js/custominput.js"></script> <script></span>
<span style="font-size:14px;"></span><pre name="code" class="html"><span style="font-size:14px;">//样式切换处</span>$(document).ready(function(){$(".nav_keshi li").each(function(){ $(this).click(function(){$(this).siblings().removeClass("list_keshi_checked");$(this).toggleClass("list_keshi_checked"); $(".list_keshi").find(".allow_right").css("transform","rotate(0deg)");
$(".list_keshi_checked").find(".allow_right").css("transform","rotate(90deg)"); }); });});//隐藏点击的目录function yincang(number){ //给页面元素添加样式 var DisPlay = $("#div" + number).css("display"); if( DisPlay != "none"){ $('.keshi_child').slideUp(); //隐藏// $('.keshi_child').empty();
//数据清空 } else { $('.keshi_child').slideUp(); //隐藏 $("#div" + number).slideToggle(); //当前的数据隐藏显示}}//点击一级目录查询二级目录(查询出二级后 存放)function gotoDepartment(id,number) {yincang(number);// $("#div" + number).empty(); //清空之前的数据var tmp=$("#div" + number).attr("tmp");if(tmp==0){var
path = "<%=request.getContextPath()%>";$.post(path+'/mobile/department/departmentListByPid', {pid:id }, function (data) //回传函数 { if(data.length>0){ var div = ""; for(var i=0;i<data.length;i++){div += "<a class='keshi_child_list_a' href='javascript:;' onclick='toDoc("+data[i].id+")'>"+
data[i].cnName+"</a>"; } $("#div" + number).append(div); $("#div" + number).attr("tmp",1); }else{ alert("无二级科室"); } } );}}//跳转其他列表function toDoc(id){var ctx = "<%=request.getContextPath()%>"; location.href=ctx+"/mobile/doctorInfo/toListPage?deptbId="+id;}</script></html>
相关文章推荐
- 蛙蛙推荐:不用jquery实现tab页切换,刷新,后退,前进状态自动维护
- jQuery实现切换页面布局使用介绍
- jquery 切换显示隐藏的状态
- jquery页面无刷新切换皮肤并保存
- jQuery万能图片切换插件powerSwitch应用(支持同一页面多次调用)
- 改装的tabs页面,鼠标移动上去切换,可以点击链接和jquery的UI是不同的
- 分享一款页面视差滚动切换jquery.localscroll插件
- jquery mobile 切换页面
- 修复checkbox的状态切换和动态取值的问题,主要是学会jquery选择或者不选中checkbox
- jquery简单的table切换,在页面可以多次使用。
- jQuery实现切换页面布局使用介绍
- 【jquery】切换标题与内容/点击后动态切换当前状态
- jquery切换元素的可见状态
- 解决jquery mobile+phonegap页面切换闪屏问题
- JQuery页面图片切换和新闻列表滚动效果的具体实现
- (js)用window.onload实现刷新页面的导航栏状态的切换
- Jquery实现“Iframe”页面切换
- Microsoft Visual Studio 2008 页面切换视图时假死状态解决办法
- jQuery实现点击单选按钮切换选中状态效果
- phonegap + jquery mobile切换页面的几种方法