js代碼
//展開或折疊應(yīng)急物資數(shù)量詳情
$hideable = $('#hideable');
$('a#hiding').click(function(event) {
event.preventDefault();
if ($hideable.is(':hidden')) {
$hideable.slideDown('slow').show();
$(this).text('▽').css('font-size','20px');
} else {
$hideable.slideUp('slow');
$hideable.hide('slow');
$(this).text('?').css('font-size','10px');
}
});
css代碼及html代碼
參考上一個(gè)文章 ：css實(shí)現(xiàn)背景透明文字不透明
<div class="accordion-header">
<h4 class="mapheader4"><a href="#" id="hiding">▽</a>窗口標(biāo)簽欄</h4>
</div>
<div id="hideable">
<ul class="hideline">
<li >我是line1</li>
<li >我是line2</li>
<li >我是line3</li>
</ul>
</div>
.accordion-header {background-color:rgba(48,126,204,0.7);border-color: #307ecc; min-height: 30px;padding:2px 8px;}
#hideable {background-color:rgba(48,126,204,0.4);border-color: #307ecc;padding-left:10px;}
#hiding {color:white;font-size:20px;padding-right:10px;}
.mapheader4 {color:white;margin:5px;}
.hideline li{color: #FFFFFF; font-size:14px;}
