                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /展开与收起效果

展开与收起效果

为什么用dreamweaver编写效果一点都实现不了

慕粉1474109678

2016-10-29

源自：展开与收起效果 4-3

关注问题我要回答

788

操作

收起

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实现按钮点击展开与收起</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>
     手机 - 商品筛选</p>
    <p>
     网络：移动4G（TD-LTE ）联通4G（TD-LTE）联通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>
  </div>
</body>
</html>