码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现手风琴效果

时间:2018-12-26 20:00:10      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:没有   func   down   image   bsp   jquery   script   颜色   display   

jQuery实现手风琴效果,这里是纵向的,效果图如下:

技术分享图片

在此处是当鼠标移动到p上面的时候,p下面的ol里面的内容显现出来

主要用了html,css,jQuery的知识

先把大致需要的东西写出来,此处用的是ul,一个ul里面用了4个li,在li下又有p标签和新的内容,这里p代表的是诗歌的题目和作者的名字,p标签下面的内容是诗歌的具体内容,p标签下面用了一个ol和4个li,放诗词内容的

技术分享图片

在style中写了一些样式。

首先写*的样式,设置margin和padding为0,这样看起来距离边上没有间隙

接下来写ul和li的样式

list-style:设置列表项目相关内容

设置一下ul宽,高,背景颜色,marg之类的

ul>li选择ul的直接后代,li,设置字体居中,下边框的大小,行高

设置ul里面的li下面的ol,也就是诗歌的内容部分,设置背景颜色,在没有点击的时候隐藏,点击的时候显示,这里设置一下,display为none;

最后在设置诗歌里面的每行内容的行高

技术分享图片

到此,html和css的部分都写完了,下面开始写jQuery的部分

此处要点击的是p也就是诗歌的名字和作者,在这里写的是鼠标移动事件

$(this).next().slideDown().end().parent().siblings().children("ol").hide();技术分享图片
在最后附上完整的代码仅供大家参考

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-1.11.3.min.js"></script>
        <style type="text/css" media="screen">
            * {
                margin: 0;
                padding: 0;
            }
            ul,li {
                list-style: none
            }
            ul {
                width: 300px;
                background:pink;
                margin: 50px auto;
            }
            ul>li {
                line-height: 50px;
                text-align: center;
                border-bottom: 1px solid #ccc;
            }
            ul>li>ol {
                background: paleturquoise;
                display: none;
            }
            ul>li>ol>li {
                line-height: 50px;
            }
        </style>
    </head>
    <body>
        <ul id="ul">
            <li>
                <p>使至塞上   王维</p>
                <ol>
                    <li>单车欲问边,属国过居延</li>
                    <li>征蓬出汉塞,归雁入胡天</li>
                    <li>大漠孤烟直,长河落日圆</li>
                    <li>萧关逢候骑,都护在燕然</li>
                </ol>
            </li>
            <li>
                <p>登黄鹤楼 崔颢</p>
                <ol>
                    <li>昔人已乘黄鹤去,此地空余黄鹤楼</li>
                    <li>黄鹤一去不复返,白云千载空悠悠</li>
                    <li>晴川历历汉阳树,芳草萋萋鹦鹉洲</li>
                    <li>日暮乡关何处是,烟波江上使人愁</li>
                </ol>
            </li>
            <li>
                <p>无题 李商隐</p>
                <ol>
                    <li>相见时难别亦难,东风无力百花残</li>
                    <li>春蚕到死丝方尽,蜡炬成灰泪始干</li>
                    <li>晓镜但愁云鬓改,夜吟应觉月光寒</li>
                    <li>蓬山此去无多路,青鸟殷勤为探看</li>
                </ol>
            </li>
            <li>
                <p>过故人庄 孟浩然</p>
                <ol>
                    <li>故人具鸡黍,邀我至田家。</li>
                    <li>绿树村边合,青山郭外斜。</li>
                    <li>开轩面场圃,把酒话桑麻。</li>
                    <li>待到重阳日,还来就菊花。</li>
                </ol>
            </li>
        </ul>
        <script type="text/javascript">
            $("#ul>li>p").mousemove(function(){
                $(this).next().slideDown().end().parent().siblings()
                .children("ol").hide();
            });  
        </script>
    </body>
</html>

 

jQuery实现手风琴效果

标签:没有   func   down   image   bsp   jquery   script   颜色   display   

原文地址:https://www.cnblogs.com/3542446186qq/p/10180477.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!