原生态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>

效果如图：

展开后

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

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

去掉iframe默认滚动条后影响正常滚动以及js解决高度自适应。
对于iframe,相信大家都是知道存在很多弊端,比如说不利于搜索引擎的抓取:产生冗余结构体系不易管理等.不过在漫长的开发路上有时候使用是不可避免的. 前两天在做一个退弹的功能的时候使用了iframe, ...
js控制高度自适应，做到响应式
//9宫格布局 var prints=window.innerHeight-($('.header').height()+40);//屏幕去掉(头部高度+头部padding) $('.weui-gri ...
原生态js展开收缩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
JS跨域解决iframe高度自适应（IE8/Firefox/Chrome适用）
参考园友的js跨越实现,有提到三种方式: 1. 中间页代理方式,利用iframe的location.hash 参见:http://www.5icool.org/a/201203/a1129.html ...
textarea高度自适应自动展开
在使用之前,推荐两个比较好的事件,分别是oninput和onpropertychange,IE9以下不兼容oninput.在textarea发生变化时,可以通过监听这两个事件来触发你需要的功能. te ...
父容器根据子容器高度自适应：设置父容器 height:100%;overflow:hidden;
父容器根据子容器高度自适应:设置父容器 height:100%;overflow:hidden;
谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！
谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...
使用div模拟textarea，实现文本输入框高度自适应（附：js控制textarea实现文本输入框高度自适应）
一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...

随机推荐

Request.IsAuthenticated
Original question that the answer below refers to: I have a forms based application that is giving m ...
返回一个可用的名称如1_4.txt
); MessageBox.Show(tt); }
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. 思路 ...
hibernate 反向生实体类 and 为什么老是多一个id
hibernate 反向生实体类 and 为什么老是多一个id 2017年04月01日 20:32:51 阅读数:548
使用UrlRewriteFilter对url进行更替
一般来说,使用struts之后url的访问实际上访问的是action的地址,为了不让该地址暴露给别人,可以采用UrlRewriteFilter来对url进行重写. 首先,在web.xml里面配置: & ...
html传参数 js工具类
var QueryUtils = { GetQueryString: function (name) { var reg = new RegExp("(^|&)" + na ...
编写高质量代码改善C#程序的157个建议——建议81：使用Parallel简化同步状态下Task的使用
建议81:使用Parallel简化同步状态下Task的使用在命名空间System.Threading.Tasks中,有一个静态类Parallel简化了在同步状态下的Task的操作.Parallel主 ...
imagelist用法
1.添加一个Imagelist控件,并双击控件图标如下图 2.点击新增按钮
Delphi xe5如何使用Bluestacks模拟器（用真机或者用猩猩，夜神模拟器，自带的不好用）
首先,关于这个模拟器问题比较纠结,这是一个关于adb的问题. Delphi XE5会自动识别模拟器和真机,但是你必须先打开模拟器在打开Delphi IDE(Delphi开发环境),否则还得麻烦一会儿. ...
Windows下Mongodb安装及配置(转载)
转载(https://blog.csdn.net/liang377122210/article/details/79062681) MongoDB的安装很简单,设置好安装路径后,一直Next直到安装结 ...

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

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

随机推荐

热门专题