<!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>

效果如图：

展开后

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

原生态js展开高度自适应100%的更多相关文章

  1. 去掉iframe默认滚动条后影响正常滚动以及js解决高度自适应。

    对于iframe,相信大家都是知道存在很多弊端,比如说不利于搜索引擎的抓取:产生冗余结构体系不易管理等.不过在漫长的开发路上有时候使用是不可避免的. 前两天在做一个退弹的功能的时候使用了iframe, ...

  2. js控制高度自适应，做到响应式

    //9宫格布局 var prints=window.innerHeight-($('.header').height()+40);//屏幕去掉(头部高度+头部padding) $('.weui-gri ...

  3. 原生态js展开收缩

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JS跨域解决iframe高度自适应（IE8/Firefox/Chrome适用）

    参考园友的js跨越实现,有提到三种方式: 1. 中间页代理方式,利用iframe的location.hash 参见:http://www.5icool.org/a/201203/a1129.html ...

  5. textarea高度自适应自动展开

    在使用之前,推荐两个比较好的事件,分别是oninput和onpropertychange,IE9以下不兼容oninput.在textarea发生变化时,可以通过监听这两个事件来触发你需要的功能. te ...

  6. Iframe 高度自适应，js控制Iframe 高度自适应

     Iframe 高度自适应, js控制Iframe 高度自适应, iframe自适应高度 ================================ ©Copyright 蕃薯耀 2019年12 ...

  7. 父容器根据子容器高度自适应：设置父容器 height:100%;overflow:hidden;

    父容器根据子容器高度自适应:设置父容器  height:100%;overflow:hidden;

  8. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

  9. 使用div模拟textarea，实现文本输入框高度自适应（附：js控制textarea实现文本输入框高度自适应）

    一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...

随机推荐

  1. shell编程——sed用法之参数详解

    sed格式: sed 参数 '正则表达式' 文件名 sed的常见参数有以下几种: 1.-n, --quiet, --silent 取消自动打印模式 不加n默认打印整个文件: [root@localho ...

  2. k8s v1.5.8 单节点搭建

    setsid etcd -name etcd -data-dir /var/lib/etcd -listen-client-urls http://0.0.0.0:2379,http://0.0.0. ...

  3. JAVA heap space 内存溢出

    3月28日开始使用JAVA调用SAP RFC后提示内存溢出 尝试增加set java_OPTS.....但仍然提示内存溢出 最终设置方法

  4. 82. Remove Duplicates from Sorted List II (List)

    Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...

  5. 游戏动作师使用Unity3D遇到过的所有问题

    http://blog.csdn.net/onafioo/article/details/50865169 http://www.gameres.com/thread_480489.html 文/拉撒 ...

  6. 洛谷 P2899 [USACO08JAN]手机网络Cell Phone Network

    题目描述 Farmer John has decided to give each of his cows a cell phone in hopes to encourage their socia ...

  7. [Jenkins] 执行SoapUI的task，设置邮件内容为HTML+CSS

    设置邮件内容:Default Content <span style="font-family:verdana;font-size:16px;color:black;font-weig ...

  8. C#读取EXCEL到内存

    public class ExcelUtils { private static string strcon = "Server=48.12.1.28;initial catalog=NBS ...

  9. Linq学习<五> 运用linq查询Xml

    这节将学习如何用 linq查询xml 一.我们先看看在xml中我们怎么操作 public void xmlWayToQueryXmlFile() { XmlDocument xmldoc = new ...

  10. unity 确定敌人行走路线

    一开始搞这个问题很头疼,无从下手. 1.敌人在随机地点产生后,每个敌人有要有自己自动的行走路线,目的地是保护地,而且行走路线要多样化. 2.敌人在看到玩家时,改变行走路线,向玩家的方向行进,且到了一定 ...