词语解释（一）

最新推荐文章于 2021-02-11 17:24:34 发布

星宝007

最新推荐文章于 2021-02-11 17:24:34 发布

阅读量330

点赞数

分类专栏： html css jquery 文章标签： class

本文链接：https://blog.csdn.net/WANG_CSD/article/details/60139950

版权

html 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

jquery

3 篇文章 0 订阅

订阅专栏

css如下：

@charset 'utf-8';
body {font-size:12px; color:#333; font-family:arial,'\5fae\8f6f\96c5\9ed1','\5b8b\4f53';line-height:1.8; background:#f2f5ee url("../images/bg01.jpg") no-repeat top center;}
.iframeBody {background-image:none; background-color:transparent;}
.ma{width:1100px; margin:0 auto;}
a,a:hover{text-decoration:none;}

/*拓展学习*/
.expandS{margin-top:23px;padding:0 15px;background:url("../images/verticalLine.gif") repeat-y 24px top;position:relative;}
.expandS ul li{padding-bottom:20px;}
.expandS ul li .order,.expandS ul li .orderHL{width:19px;height:19px;background:#999;border-radius:50%;font-weight:600;color:#fff;text-align:center;font-size:16px;line-height:19px;margin-right:15px;}
.expandS ul li .orderHL{background:#6e8d3a;position:relative;}
.termExplan{width:80%;}
.termExplan .term{line-height:20px;}
.termExplan .term span{font-size:14px;line-height:20px;margin-right:30px;font-weight:bold;position:relative;cursor:default;}
.termExplan .term.hover span,.termExplan .term:hover span{color:#6e8d3a;}
.termExplan .term .span_click{cursor:pointer;}
.termExplan .term .expl{background:#f5f5f5;left:0px;top:11px;/*top:30px;*/z-index:10;display:none;}
.termExplan .term .expl .ExpCon{padding:20px;font-size:13px;color:#666;margin-bottom:20px;}
.termExplan .term .expl em{width:22px;height:11px;background:url("../images/xiaosanjiao.gif") no-repeat;left:2%;top:-10px;}

--------------------------------------------------------------------------------------------

html如下：

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/reset_base.css" />
<link rel="stylesheet" href="css/wordExplain.css" />
<style>
.termExplan .term .expl .ExpCon {margin-bottom:20px;}
.termExplan .term .expl {top:30px;}

.termExplan .term .expl{width:500px;}
</style>
</head>

<body class="iframeBody">

<div class="p20 f16">这么做有点问题,容器宽度窄时，解释内容会超出页面，需改良</div>
<div class="content clearfix expandS">
<ul class="clearfix">

<li class="clearfix">
<div class="fl orderHL">ok</div>
<div class="fl termExplan clearfix">
<div class="fl term pr">
<span class="span_click">1111111</span>

<div class="expl pa">
<div class="ExpCon clearfix">斜坡上的岩屑或块体在重力作用下，快速向下坡移动称为崩塌。崩塌过程按块体的地貌部位和崩塌形式又可分为山崩、塌岸和散落。
</div>
<em class="pa"></em>
</div>

</div>
<div class="fl term pr">
<span class="span_click">22222222</span>
<div class="expl pa">
<div class="ExpCon clearfix">
由冰川运动对地表土石体造成机械破坏作用的一系列现象称为冰川侵蚀(glacier erosion)。高山高原雪线以上的积雪，经过外力作用，转化为有层次的厚达数十米至数百米的冰川冰。而后冰川冰沿着冰床作缓慢塑性流动和块体滑动，冰川及其底部所含的岩石碎块不断锉磨冰床。同时在冰川下因节理发育而松动的岩块突出部分有可能和冰川冻结在一起，冰川移动时将岩块拔出带走。冰川侵蚀活跃于现代冰川地区，我国主要发生在青藏高原和高山雪线以上。
</div>
<em class="pa"></em>
</div>
</div>
</div>
</li>
</ul>
</div>

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/chosen.jquery.js"></script>
<script type="text/javascript">
$(function(){

$(".term").on("click",function(){
var $this = $(this),
expl_ = $this.find(".expl");

if (expl_&&expl_.length>0){
if(expl_.css("display") == "none"){
$this.parents(".content").find(".expl").hide();
$this.find(".expl").show();
$this.parent().find(".term").removeClass('hover');
$this.addClass('hover');
}else if(expl_.css("display") == "block"){
$this.find(".expl").hide();
$this.removeClass('hover');
}
}else{
return false;
}
});

});
</script>

</body>
</html>

星宝007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
词语解释（一）

css如下：@charset 'utf-8';body {font-size:12px; color:#333; font-family:arial,'\5fae\8f6f\96c5\9ed1','\5b8b\4f53';line-height:1.8; background:#f2f5ee url("../images/bg01.jpg") no-repeat top center;}
复制链接

扫一扫