jquery 状态切换及页面拼接
浏览数：39 /
时间：2015年06月09日
大家好：
由于一个样式的问题搞了半天，现在终于整好了，给大家分享一下！
效果：
<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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
