jquery之手风琴

2024-04-27 15:04:19

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE html>

<html><head> <meta name="viewport" content="width=device-width" /> <title></title> <link href="~/Areas/CSSJquery/CSS/AccordionDemo.css" rel="stylesheet" /> <script src="~/Areas/CssJquery/JS/AccordionDemo.js"></script></head><body> <div > <ul> <li class="li" style="background-image: url(/Areas/CssJquery/Img/s1.jpg)"> <div class="uldiv" > <p>秋意渐，剑风凉，池边萧萧木。</p> <p>相思楚，乡关暮，夜深谁与渡。</p> </div> </li> <li class="li" style="background-image: url(/Areas/CssJquery/Img/s2.jpg)"> <div class="uldiv"> <p>百花竞妍梅自孤，</p> <p>品高何须同入俗。</p> </div> </li> <li class="li" style="background-image: url(/Areas/CssJquery/Img/s3.jpg)"> <div class="uldiv"> <p>待到飞雪舞青城，</p> <p>枝枝瓣瓣见风骨。</p> </div> </li> <li class="li" style="background-image: url(/Areas/CssJquery/Img/s4.jpg)"> <div class="uldiv"> <p>秋意渐，剑风凉，池边萧萧木。</p> <p>相思楚，乡关暮，夜深谁与渡。</p> </div> </li> <li class="li" style="background-image: url(/Areas/CssJquery/Img/s5.jpg)"> <div class="uldiv"> <p>秋意渐，剑风凉，池边萧萧木。</p> <p>相思楚，乡关暮，夜深谁与渡。</p> </div> </li> </ul> </div></body>

</html>

js----------------------------------------------------------------------------------

$(function () { $(".li").click(function () { $(this).siblings(".li").stop(true, true); $(this).siblings(".li").animate({ 'width': '100px' }, 500); $(this).animate({ 'width': '740px' }, 1000); })})

上一篇：【JS】前端数学函数应用

下一篇：关于border-radius 以及 /50px

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注