<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!-- 样式表 -->
<style type="text/css">
body {width: 450px; margin: 100px auto; text-align: center;font-family: 'microsoft yahei',Arial,sans-serif;background: #222222;}
h1 {border-bottom: 1px solid #555555; color:#fff; padding-bottom: 20px; font-size: 28px;font-weight:normal;margin-bottom: 30px;}
dd {margin: 0;padding: 20px 0;font-size: 14px;background: #fff; padding: 10px 15px;text-align: left;}
dt {cursor: pointer;font-size : 18px;line-height: 23px;background: #f6f6f6;box-shadow: 0 1px 0 #FFFFFF;font-weight: 400;color: #464646;text-align: left;padding: 10px 14px;border-bottom:1px solid #e3e3e3}
dt:first-child { border-top: none; }
dt:nth-last-child(2) { border-bottom: none; }
.hidden { display: none;}
</style>
</head>
<body>
<dl style="width:45%; float:left">
<dt> <i class="fa fa-users"></i> 关于我们</dt>
<dd style="height:200px"></dd>
<dt><i class="fa fa-map-marker"></i> 办公室地图</dt>
<dd style="height:200px"> <i class="fa fa-bank"></i> 办公室地图 </dd>
</dl>
<dl style="width:45%; float:right">
<dt> <i class="fa fa-users"></i> 关于我们</dt>
<dd style="height:200px"> 关于我们 关于我们网站 <br/>
</dd>
<dt><i class="fa fa-map-marker"></i> 办公室地图</dt>
<dd style="height:200px"> <i class="fa fa-bank"></i> 办公室地图 </dd>
</dl>
<script type='text/javascript' src="js/jquery-1.7.2.js"></script>
<script>
$(function (){
$('dd').filter(':nth-child(4)').addClass('hidden','hidden1');
$('dl').on('click', 'dt', function() {
$(this)
.next()
.slideDown(300)
.siblings('dd')
.slideUp(300);
});
generateFont();
});
</script>
</body>
</html>
不管点击左侧的办公室地图还是右侧的办公室地图。两个dl同时向上滑动
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!-- 样式表 -->
<style type="text/css">
body {width: 450px; margin: 100px auto; text-align: center;font-family: 'microsoft yahei',Arial,sans-serif;background: #222222;}
h1 {border-bottom: 1px solid #555555; color:#fff; padding-bottom: 20px; font-size: 28px;font-weight:normal;margin-bottom: 30px;}
dd {margin: 0;padding: 20px 0;font-size: 14px;background: #fff; padding: 10px 15px;text-align: left;}
dt {cursor: pointer;font-size : 18px;line-height: 23px;background: #f6f6f6;box-shadow: 0 1px 0 #FFFFFF;font-weight: 400;color: #464646;text-align: left;padding: 10px 14px;border-bottom:1px solid #e3e3e3}
dt:first-child { border-top: none; }
dt:nth-last-child(2) { border-bottom: none; }
.hidden { display: none;}
</style>
</head>
<body>
<dl style="width:45%; float:left">
<dt> <i class="fa fa-users"></i> 关于我们</dt>
<dd style="height:200px"></dd>
<dt><i class="fa fa-map-marker"></i> 办公室地图</dt>
<dd style="height:200px"> <i class="fa fa-bank"></i> 办公室地图 </dd>
</dl>
<dl style="width:45%; float:right">
<dt> <i class="fa fa-users"></i> 关于我们</dt>
<dd style="height:200px"> 关于我们 关于我们网站 <br/>
</dd>
<dt><i class="fa fa-map-marker"></i> 办公室地图</dt>
<dd style="height:200px"> <i class="fa fa-bank"></i> 办公室地图 </dd>
</dl>
<script type='text/javascript' src="js/jquery-1.7.2.js"></script>
<script>
$(function (){
$('dd').filter(':nth-child(4)').addClass('hidden','hidden1');
$('dl').on('click', 'dt', function() {
$(this)
.next()
.slideDown(300)
.siblings('dd')
.slideUp(300);
});
generateFont();
});
</script>
</body>
</html>
不管点击左侧的办公室地图还是右侧的办公室地图。两个dl同时向上滑动
