本文主要是介绍target实现手风琴效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!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”不能忘记写。
这篇关于target实现手风琴效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
