关于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代码

[提问] 关于Jquery手风琴特效深入处理

共0个回复最后回复于 2018-6-9 19:17

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[提问] 关于Jquery手风琴特效深入处理

共0个回复 最后回复于 2018-6-9 19:17

共0个回复最后回复于 2018-6-9 19:17