原生态js展开高度自适应100% 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Document</title>
    <style type="text/css">
        *{margin: 0; padding: 0;}
        body{max-width: 640px; margin: 0 auto; background-color: #ddd; font:14px/1.4 "Microsoft Yahei",Arial,Helvetica,sans-serif;}
        a{text-decoration: none; color: #333;}
        .friendship{ overflow: hidden; position: relative; height: 55px; background-color: #fff; }
        .friendship a{ float: left; display: block; margin: 5px; }
        .friendship i{ position: absolute; bottom: 10px; right: 10px;  width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top:10px solid #0066cc; cursor: pointer;}
        .f_up{
            transform:rotate(180deg);
            -ms-transform:rotate(180deg);
            -moz-transform:rotate(180deg);
            -webkit-transform:rotate(180deg);
            -o-transform:rotate(180deg);
        }
    </style>
</head>
<body>
<div class="friendship" id="friendship">
    <i class="f_down" onclick="var obj_link=document.getElementById('friendship');this.className=='f_up'?(this.className='f_down',obj_link.style.height='55px'):(this.className='f_up',obj_link.style.height='auto');"></i>
    <a href="#">百度</a>
    <a href="#">淘宝</a>
    <a href="#">京东</a>
    <a href="#">第一星座</a>
    <a href="#">付费算命</a>
    <a href="#">取名网</a>
    <a href="#">爱花卉</a>
    <a href="#">福缘殿</a>
    <a href="#">水晶物语</a>
    <a href="#">命里网</a>
    <a href="#">百度</a>
    <a href="#">淘宝</a>
    <a href="#">京东</a>
    <a href="#">第一星座</a>
    <a href="#">付费算命</a>
    <a href="#">取名网</a>
    <a href="#">爱花卉</a>
    <a href="#">福缘殿</a>
    <a href="#">水晶物语</a>
    <a href="#">命里网</a>
    <a href="#">百度</a>
    <a href="#">淘宝</a>
    <a href="#">京东</a>
    <a href="#">第一星座</a>
    <a href="#">付费算命</a>
    <a href="#">取名网</a>
    <a href="#">爱花卉</a>
    <a href="#">福缘殿</a>
    <a href="#">水晶物语</a>
    <a href="#">命里网</a>
    <a href="#">百度</a>
    <a href="#">淘宝</a>
    <a href="#">京东</a>
    <a href="#">第一星座</a>
    <a href="#">付费算命</a>
    <a href="#">取名网</a>
    <a href="#">爱花卉</a>
    <a href="#">福缘殿</a>
    <a href="#">水晶物语</a>
    <a href="#">命里网</a>
</div>
    
</body>
</html>

效果如图：

展开后

 

如果文章中有不对之处，随时欢迎您的纠正~~ 

 

posted @ 2017-03-02 10:14  前端HL  阅读(1058)  评论(0)  编辑  收藏  举报