Menu

3行js实现手风琴效果。

2016年8月27日 - php

开门见山:简单实用手风琴效果(博主自己写的)

ps:firefox下打开效果更佳

shoufengqin

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>jquery手风琴效果</title>
<script type=”text/javascript” src=”jquery-3.1.0.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.middle_top”).click(function(){
$(this).next().slideToggle(200);//next()表示选择选取当前元素的后一个元素
});
});
</script>
<style type=”text/css”>
*{
padding:0;
margin:0;
}
ul{
list-style-type:none;
}
.same{
margin:0 auto;
padding:20px 0 0 0;
width:1190px;
height:750px;
}
#middle ul{
width:750px;
margin:0 auto;
background-color:#00A0E9;
color:#FFFFFF;
font-size:19px;
}
ul li{
border-bottom:1px solid #52ACF5;
}
.middle_top{
padding:20px 0 20px 20px;
cursor:pointer;
}
.middle_bottom{
padding:40px 0 20px 20px;
background-color:#FFFFFF;
border:1px solid #D6DBDD;
display:none;
color:#CAD2D5;
}
li:hover{
background-color:#1E88E5;
}
</style>
</head>
<body>
<div id=”container”>
<div class=”same” id=”middle”>
<ul>
<li>
<div class=”middle_top”> How do I create an account? </div>
<div class=”middle_bottom”><pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quaequidemblanditiis delectus corporis,possimus officia sint
sequiex teneturid impedit est pariatur iure animi non a ratione
reiciendis nihil sed consequatur atque repellendus fugit
perspiciatis rerum et. Dolorum consequuntur fugit deleniti,
soluta fuga nobis. Ducimus blanditiis velit sit iste delectus
obcaecati debitis omnis,assumenda accusamus cumque perferendis
eos aut quidem!
</pre>
</div>
</li>
<li>
<div class=”middle_top”> How do I change my password? </div>
<div class=”middle_bottom”><pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quaequidemblanditiis delectus corporis,possimus officia sint
sequiex teneturid impedit est pariatur iure animi non a ratione
reiciendis nihil sed consequatur atque repellendus fugit
perspiciatis rerum et. Dolorum consequuntur fugit deleniti,
soluta fuga nobis. Ducimus blanditiis velit sit iste delectus
obcaecati debitis omnis,assumenda accusamus cumque perferendis
eos aut quidem!
</pre>
</div>
</li>
<li><div class=”middle_top”> How do I upload large files? </div>
<div class=”middle_bottom”><pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quaequidemblanditiis delectus corporis,possimus officia sint
sequiex teneturid impedit est pariatur iure animi non a ratione
reiciendis nihil sed consequatur atque repellendus fugit
perspiciatis rerum et. Dolorum consequuntur fugit deleniti,
soluta fuga nobis. Ducimus blanditiis velit sit iste delectus
obcaecati debitis omnis,assumenda accusamus cumque perferendis
eos aut quidem!
</pre>
</div>
</li>
<li><div class=”middle_top”> Any support backup to my files? </div>
<div class=”middle_bottom”><pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quaequidemblanditiis delectus corporis,possimus officia sint
sequiex teneturid impedit est pariatur iure animi non a ratione
reiciendis nihil sed consequatur atque repellendus fugit
perspiciatis rerum et. Dolorum consequuntur fugit deleniti,
soluta fuga nobis. Ducimus blanditiis velit sit iste delectus
obcaecati debitis omnis,assumenda accusamus cumque perferendis
eos aut quidem!
</pre>
</div>
</li>
<li><div class=”middle_top”> Are there any hidden fees? </div>
<div class=”middle_bottom”><pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quaequidemblanditiis delectus corporis,possimus officia sint
sequiex teneturid impedit est pariatur iure animi non a ratione
reiciendis nihil sed consequatur atque repellendus fugit
perspiciatis rerum et. Dolorum consequuntur fugit deleniti,
soluta fuga nobis. Ducimus blanditiis velit sit iste delectus
obcaecati debitis omnis,assumenda accusamus cumque perferendis
eos aut quidem!
</pre>
</div>
</li>
<li><div class=”middle_top”> How does syncing work? </div>
<div class=”middle_bottom”><pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quaequidemblanditiis delectus corporis,possimus officia sint
sequiex teneturid impedit est pariatur iure animi non a ratione
reiciendis nihil sed consequatur atque repellendus fugit
perspiciatis rerum et. Dolorum consequuntur fugit deleniti,
soluta fuga nobis. Ducimus blanditiis velit sit iste delectus
obcaecati debitis omnis,assumenda accusamus cumque perferendis
eos aut quidem!
</pre>
</div>
</li>
<li><div class=”middle_top”> Do you offer refunds? </div>
<div class=”middle_bottom”><pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quaequidemblanditiis delectus corporis,possimus officia sint
sequiex teneturid impedit est pariatur iure animi non a ratione
reiciendis nihil sed consequatur atque repellendus fugit
perspiciatis rerum et. Dolorum consequuntur fugit deleniti,
soluta fuga nobis. Ducimus blanditiis velit sit iste delectus
obcaecati debitis omnis,assumenda accusamus cumque perferendis
eos aut quidem!
</pre>
</div>
</li>
</ul>
</div>
<div>
<form action=”money.php” method=”POST”>
金额<input type=”text” name=”money” /><br />
红包数<input type=”text” name=”number” /><br />
<input type=”submit” name=”submit” value=”开始抢” />
</form>
</div>
</div>

</body>
</html>

分享

12 thoughts on “3行js实现手风琴效果。

博主

2017-4-14,博主到此一游。




0



0
    小白

    博主,我也是web开发人员。




    0



    0
      wind_php

      咱是好孩子,好好学习,天天向上。




      1



      1
Davshootte

Cialis Et Sante Approved Canadian Online Pharmacies viagra Msm Propecia Buy Metformin Online Ciprofloxacin And Amoxicillin Taken Togather Propecia Madrid




0



0
    super man

    you should leave your warm message rather than anything else.




    0



    0
crique

You are absolutely right. In it something is also to me it seems it is excellent idea. I agree with you.
http://opno.life/
http://www.sexybang.top/gal/4314.html
https://twitter.com/pornblogpw
http://pornblogpw.blogspot.com/




0



0
crique

An added important component is that if you are a senior citizen, travel insurance regarding pensioners is something you should really think about. The mature you are, the more at risk you’re for getting something undesirable happen to you while in foreign countries. If you are not necessarily covered by a few comprehensive insurance policy, you could have quite a few serious problems. Thanks for expressing your guidelines on this website.
http://gamejolt.com/games/rexuiz-fps/250380
http://pornblogpw.blogspot.com/
http://www.notbred.com/
http://gamejolt.com/games/rexuiz-fps/250380




0



0
crique

At this time it looks like Expression Engine is the top blogging platform available right now. (from what I’ve read) Is that what you’re using on your blog?
http://www.ninjaevolution.net/ben/viewtopic.php?pid=729731#p729731
http://www.notbred.com/
http://carmillaforum.com/viewtopic.php?f=18&t=357846
https://twitter.com/vestapugh




0



0
canadian pharmacy

Fantastic web site. A lot of helpful information here.
I am sending it to some buddies ans also sharing in delicious.
And of course, thanks in your sweat!




0



0

发表评论