关于jquery手风琴特效深入处理

登录

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

   // alert("弹出测试")
   $(".box p").first().show();
   $(".box span").html("+")
   $(".box h1").click(function(){
      $(this).next("p").slideToggle(500,function(){ } ).siblings("p").slideUp();
      var a=$(this).find("span").text();
      if(a=="+"){

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

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

      }

   }
      )

   }
)

lori棒棒糖 · 发表于 2018-6-4 17:35:07

你把所有代码全部复制粘贴上来，不要只复制局部~

JHT · 发表于 2018-6-5 19:50:03

lori棒棒糖发表于 2018-6-4 17:35
你把所有代码全部复制粘贴上来，不要只复制局部~

<!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>

JHT · 发表于 2018-6-5 19:54:09

<!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手风琴特效深入处理

本帖子中包含更多资源

共3个回复最后回复于 2018-6-5 19:54

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

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

本帖子中包含更多资源

共3个回复 最后回复于 2018-6-5 19:54

共3个回复最后回复于 2018-6-5 19:54