词语解释（二）

来源：互联网发布：网络骗术小品编辑：程序博客网时间：2024/04/27 16:02

.......

.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 .span_click{cursor:pointer;}
.termExplan .term .expl{/*width:500px;*/background:#f5f5f5;left:0px;top:11px;z-index:10;}
.termExplan .term .expl .ExpCon{padding:20px;font-size:13px;color:#666;margin-bottom:20px;margin-bottom:20px;display:none;}

.termExplan .term .span_click.hover em{width:22px;height:11px;background:url("../images/xiaosanjiao.gif") no-repeat;left:20%;top:20px;}
.termExplan .term span.hover, .termExplan .term span:hover{color:#6e8d3a;}
</style>
</head>

<body class="iframeBody">

<div class="p20 f16">改良一，如下：</div>
<div class="p20 f16">但是经过测试仍然有问题，此种写法只适用于单词量较少的情况，如果词汇过多出现折行的话，词汇解释框上的小三角样式出现问题，故如果去掉小三角的话，页面还是可以正常使用的。</div>
<div class="content clearfix expandS">
<ul class="clearfix">
<li class="clearfix">
<div class="fl orderHL">A</div>
<div class="fl termExplan clearfix">
<div class="fl term pr">
<div class="wordlist">
<span class="span_click pr">1111111<em class="pa"></em></span>
<span class="span_click pr">22222222<em class="pa"></em></span>
</div>

<div class="expl pr">
<div class="ExpCon clearfix">
斜坡上的岩屑或块体在重力作用下，快速向下坡移动称为崩塌。崩塌过程按块体的地貌部位和崩塌形式又可分为山崩、塌岸和散落。
</div>
<div class="ExpCon clearfix">
由冰川运动对地表土石体造成机械破坏作用的一系列现象称为冰川侵蚀(glacier erosion)。高山高原雪线以上的积雪，经过外力作用，转化为有层次的厚达数十米至数百米的冰川冰。而后冰川冰沿着冰床作缓慢塑性流动和块体滑动，冰川及其底部所含的岩石碎块不断锉磨冰床。同时在冰川下因节理发育而松动的岩块突出部分有可能和冰川冻结在一起，冰川移动时将岩块拔出带走。冰川侵蚀活跃于现代冰川地区，我国主要发生在青藏高原和高山雪线以上。
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){

$(".term").on("click",".span_click",function(){
var $this = $(this),
expcon_ = $this.parents(".term").find(".ExpCon");
index = $this.index();

if (expcon_&&expcon_.length>0){

$(".span_click").removeClass('hover');
$this.addClass('hover');

$(".ExpCon").hide();
$this.parents(".term").find(".ExpCon").eq(index).show();
}
else{
return false;
}

});

});
</script>

</body>
</html>

0 0