下拉面版(Slide Panel)範例 <!-- CSS --> <style type="text/css"> body { margin: 0 auto; padding: 0; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; } a:focus { outline: none; } #panel { background: #blue; height: 100px; display: none; font-size: 20px; font-style: italic; } .slide { margin: 0; padding: 0; border-top: solid 10px #422410; background: url(../../public/images/jquery/btn-slide.gif) no-repeat center top; } .btn-slide { background: url(../../public/images/jquery/white-arrow.gif) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #black; text-decoration: none; } .active { background-position: right 12px; } </style> <!-- Body --> <div id="panel"> <!-- you can put content here --> <span style=color:yellow;>Hi, slide-panel</span> </div> <p class="slide"><a href="#" class="btn-slide">下拉面版</a></p> <!-- Javascript --> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("fast"); $(this).toggleClass("active"); return false; }); }); </script> 語法解說 slideToggle(speed) 此為顯示速度設定,spped - fast、normal、slow、Number(ex. 1000)。 toggleClass("active") 此為切換箭頭圖片的背景位置。 |