jquery 状态切换及页面拼接

最新推荐文章于 2022-11-14 10:58:03 发布

置顶樱梦雪苹宝

最新推荐文章于 2022-11-14 10:58:03 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/yingmengxuepingbao/article/details/44560049

版权

java 同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

js样式

20 篇文章 0 订阅

订阅专栏

jquery样式

19 篇文章 0 订阅

订阅专栏

大家好：

由于一个样式的问题搞了半天，现在终于整好了，给大家分享一下！

效果：

<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"  οnclick="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:;' οnclick='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>