论坛

标题: 关于Jquery手风琴特效深入处理 [打印本页]

作者: JHT 时间: 2018-6-9 19:17
标题: 关于Jquery手风琴特效深入处理
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>折叠几手风琴特效</title>
      <style>
/* .box{height: 30px;width: 60px;background: red;text-align: center;cursor:pointer;}*/
/* p{width: 300px;height: 50px;display:none;background: blue;}*/
*{margin: 0;padding: 0}
.box{margin: auto;margin-top: 20px; width: 150px;height: 500px;}
h1{background: #ccc;text-align: center;height: 45px;font-size: 20px;border-bottom: 1px #181818 solid; line-height: 45px;cursor: pointer;}
span{display: block;width: 15px;height: 15px;background: #818181;text-align: center;line-height: 15px;float: left; }
p{background: #eee;padding: 10px;font-size: 14px;display: none;}
      </style>
      <script src="js/jquery-1.11.3.min.js"></script>
      <script>
   $(window).ready(function(){

   // alert("弹出测试")
   //知识点

   $(".box p").first().show();
   $(".box span").text("+");
   $(".box h1").eq(0).children("span").text("-")
   $(".box h1").click(function(){

      // $("p").css("display","block")
      // $("p").show()
      // $("p").toggle()
      // $("p").slideDown()
      // $("p").slideToggle()
      // $("p").fadeIn()
      // $("p").fadeToggle()

      $(this).next("p").slideToggle(500,function(){ }       ).siblings("p").slideUp();
      var a=$(this).children("span").text();

      if(a=="+"){

            $(this).children("span").text("-")
      }else if(a=="-"){

            $(this).children("span").text("+")

      }


   }
            )

   }
)
      </script>
</head>
<body>

<div class="box">
<h1>标题一
<span id="dd"></span>
</h1>
<p>标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容</p>
<h1>标题二
<span></span>
</h1>
<p>标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容</p>
<h1>标题三
<span></span>
</h1>
<p>标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容</p>
<h1>标题四
<span></span>
</h1>
<p>标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容</p>
</div>


</body>
</html>

你好韩文强老师！
关于您讲的Jquery手风琴特效，加减怎么处理！这是我写的js代码

欢迎光临论坛 (http://bbs.qinxue.com/)