<!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. Python的索引迭代

    Python中,迭代永远是取出元素本身,而非元素的索引. 对于有序集合,元素确实是有索引的.有的时候,我们确实想在 for 循环中拿到索引,怎么办? 方法是使用 enumerate() 函数: > ...

  2. input 隐藏边框

    style='border-left:0px;border-top:0px;border-right:0px;border-bottom:1px; border-bottom-color:Black'

  3. Hello Build To Win！我们是奶牛小分队！——记第一次团队作业

    Hello Build To Win!我们是奶牛小分队! section 1 组建团队 1.  队员介绍: 姓名 学号 风格 擅长技术 编程兴趣 希望软工角色 吴建瑜 2016012024 努力学习, ...

  4. Invoke and BeginInvoke(转载:http://www.cnblogs.com/worldreason/archive/2008/06/09/1216127.html)

    一.为什么Control类提供了Invoke和BeginInvoke机制? 关于这个问题的最主要的原因已经是dotnet程序员众所周知的,我在此费点笔墨再次记录到自己的日志,以便日后提醒一下自己. 1 ...

  5. 108.Convert Sorted Array to Binary Search Tree(Array; Divide-and-Conquer, dfs)

    Given an array where elements are sorted in ascending order, convert it to a height balanced BST. 思路 ...

  6. iOS判断字母、数字串

    以下为NSString类的扩展方法,分别是判断字符串是否只是包含字母.是否只包含数字.是否只包含字母和数字: //字母 - (BOOL)cdm_isOnlyLetters { NSCharacterS ...

  7. MySQL5.6.35部署

    1.下载软件 [root@localhost src]# wget -q http://mirrors.sohu.com/mysql/MySQL-5.6/mysql-5.6.35-linux-glib ...

  8. 优秀前端工程师必备: (总结) 清除原生ios按钮样式

    写移动端的web开发时, 需要清除IOS本身的各种样式: 1.消除ios按钮原生样式, 给按钮加自定义样式: input[type="button"], input[type=&q ...

  9. CodeForces 346A Alice and Bob (数学最大公约数)

    题意:有一堆数,然后有两个人轮流从中取出两个数,这两个数的差的绝对值不在这个集合,然后把这个数放进这个集合,如果哪个人不能拿了,就是输了,问你谁赢. 析:当时连题意都没看好,以为拿出两个数,就不放回了 ...

  10. CAD&CG GDC 2018大会论文录用名单

    Section 1 增强现实与图形学: 报告时间:2018-8-25 14:00-15:30 报告地点:会议室1 P000009 基于增强现实的产品质量信息传递方法 P000104 重彩画的风格转移 ...