target实现手风琴效果

最新推荐文章于 2021-08-03 21:27:50 发布

原创最新推荐文章于 2021-08-03 21:27:50 发布 · 610 阅读

2 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何利用HTML的id属性和a标签的href属性，结合JavaScript或CSS，实现手风琴效果。重点在于li元素的id与a链接的href对应关系的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>手风琴</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
                font-weight: normal;
            }

            ul{
                width: 500px;
                margin: 50px auto;
                padding: 5px;
            }

            a{
                height: 40px;
                width: 500px;
                background: #ccc;
                border-radius: 10px;
                line-height: 40px ;
                text-indent: 1em;
                font-size: 22px;
                position: relative;
                margin-bottom: 20px;
                text-decoration: none;
                color:#00f;
                display: block;
            }

            a:after{
                content: "";
                width: 0;
                height: 0;
                display: inline-block;
                border-width: 6px;
                border-style: solid dashed dashed dashed;
                border-color: #fff transparent transparent transparent;
                position: absolute;
                right: 12px;
                top: 15px;
            }

            p{
                width: 480px;
                height: 70px;
                padding: 15px 10px 5px;
                margin-bottom: 20px;
                line-height: 20px;
                overflow: scroll;
                overflow-x: hidden;
                font-size: 14px;
                white-space: normal;
                word-break: break-all;
                display: none;
            }

            a:hover, a:active, a:focus, li:target a{
                color: #fff;
                background: #00f;
            }

            li:target a:after{
                transform: rotate(-90deg);
            }

            li:target p{
                display: block;
            }

        </style>
    </head>
    <body>
        <ul>
            <li id="click1">
                <a href="#click1">Brand</a>
                <p>
                    Wherever you are, and whoever you may be, there is one thing in which you and I are justalike at this monment, and in all the moments of our existence. We are not at rest, we are on a journey. Our life is a movement, a tendency, a steady, ceaseless progress towards an unseen goal.
                </p>
            </li>
            <li id="click2">
                <a href="#click2" >Two</a>
                <p>
                    We are gaining something, or losing something, or losing something, everyday. Even when our position and our character seem to remain precisely the same, they are changing. For the mereadvance of time is a change. It is not the same thing to have a bare field in  January and in July. The season makes the difference. The limitations that are childlike in the child are childish in the man.
                </p>
            </li>
            <li id="click3">
                <a href="#click3">Tree</a>
                <p >
                    Everything that we do is a step in one direction or another. Even the failure to do something is in itself a deed. it sets us forward or backward. the action of the negative pole of a magnetic needle is just as real as the action of the positive pole. To decline is to accept--the other alternative.
                </p>
            </li>
        </ul>
    </body>
</html>

<li id="click1">
    <a href="#click1">Brand</a>
</li>

li的 id=”click1”和a的属性href=”#click1”不能忘记写。
这里写图片描述