                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /展開與收起效果

展開與收起效果

為什么用dreamweaver編寫效果一點(diǎn)都實(shí)現(xiàn)不了

慕粉1474109678

2016-10-29

源自：展開與收起效果 4-3

關(guān)注問題我要回答

815

操作

收起

2 回答

Abby諾亞
2016-11-23

<!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>JQ實(shí)現(xiàn)按鈕點(diǎn)擊展開與收起</title>
??<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></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 10px 0 0;
??????????? margin: 0 auto;
??????????? display: block;
??????????? color: #fff;
??????????? text-decoration: none;
??????? }
??? </style>
?<script type="text/javascript">
??$(document).ready(function(){
???$(".btn_slide").click(function(){
????$("#hpn").slideToggle();
???});
??});
?</script>
?</head>
?
?<body>
??<div>
??? <div id="pn">
????<p>
?????手機(jī) - 商品篩選</p>
????<p>
?????網(wǎng)絡(luò)：移動(dòng)4G（TD-LTE ）聯(lián)通4G（TD-LTE）聯(lián)通3G（WCDMA）
????</p>
????<div id="hpn" style="display: none">
?????<p>
??????價(jià)格： 5000以上 4000-4999 3000-3999 2000-2999
?????</p>
?????<p>
??????特點(diǎn)： JDPhone計(jì)劃 "0"元購機(jī) 防水長待機(jī) 1080P全高清屏
?????</p>
????? <p>
??????價(jià)格： 5000以上 4000-4999 3000-3999 2000-2999
?????</p>
????? <p>
??????價(jià)格： 5000以上 4000-4999 3000-3999 2000-2999
?????</p>
????</div>
???</div>
???<p class="slide">
????<a href="#" id="strHref" class="btn_slide">更多選項(xiàng)+</a>
???</p>
??</div>
?</body>
</html>