<!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
">
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>無標題文檔</title>
<head>
????<title></title>
????//?jQuery庫引用
????<script?src="7.29自己練習(xí)/jQuery.js"></script>
????
????<style?type="text/css">
????????body
????????{
????????????margin:?0?auto;
????????????padding:?0;
????????}
????????a:focus
????????{
????????????outline:?none;
????????}
????????#pn
????????{
????????????background:?#e8e8e8;
????????????width:?600px;
????????????display:?block;
????????????margin:?0?auto;
????????????padding:?5px;
????????????font-size:?9pt;
????????????height:?auto;
????????}
????????.slide
????????{
????????????margin:?0;
????????????padding:?0;
????????????width:?600px;
????????????border-top:?solid?4px?gray;
????????????margin:?0?auto;
????????}
????????.btn-slide
????????{
????????????background:?gray;
????????????text-align:?center;
????????????width:?120px;
????????????height:?30px;
????????????padding:?10px?0?0?0;
????????????margin:?0?auto;
????????????display:?block;
????????????color:?#fff;
????????????text-decoration:?none;
????????}
????</style>
????<script?type="text/javascript">??//以下jQ代碼實現(xiàn)展開與收起效果
????????
????????$(document).ready(function()?{
???
???$("#strHref").toggle(function(){
???
????$(this).text("展開+");
????$("#hpn").show(1000);
????
???},?function(){
???
????$(this).text("更多選項+");
????$("#hpn").hide(1000);
????
???}??
???)
????????????
????????});
????????
????????
????????
????????
????????
????</script>
</head>
<body>
????<div?id="pn">
????????<p>
????????????手機?-?商品篩選</p>
????????<p>
????????????網(wǎng)絡(luò)：?移動4G（TD-LTE?）?聯(lián)通4G（TD-LTE）?聯(lián)通3G（WCDMA）
????????</p>
????????<div?id="hpn"?style="display:?none">
????????????<p>
????????????????價格：?5000以上?4000-4999?3000-3999?2000-2999
????????????</p>
????????????<p>
????????????????特點：?JDPhone計劃?"0"元購機?防水?長待機?1080P全高清屏
????????????</p>
????????????<p>
????????????????價格：?5000以上?4000-4999?3000-3999?2000-2999
????????????</p>
????????????<p>
????????????????價格：?5000以上?4000-4999?3000-3999?2000-2999
????????????</p>
????????</div>
????</div>
????<p?class="slide">
????????<a?href="#"?id="strHref"?class="btn-slide">更多選項+</a></p>
</body>
</html>
吳小白
2014-10-10
舉報
0/150
提交
取消
