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

随机推荐

Linux重置管理员密码
对于一些非专业的Linux运维工程师或者偶尔使用Linux系统的学习者而言,比如我,经常会碰到忘记密码的尴尬,那这时候,快速的重置密码就相当重要了.废话不多说,今天我们就一起来学习一下如何快速重置密码 ...
数组和集合（二）：List集合的使用总结
一.概述 · 继承collection接口,List代表一个元素有序.且可重复(包括null)的集合,集合中的每个元素都有其对应的顺序索引 · List默认按元素的添加顺序设置元素的索引 · 提供了一 ...
memcache分布式的高速缓存系统
http://baike.baidu.com/link?url=8v9IdWg0i_ptrTfz0APh32-SbvNUAWvXrcZM5vuJ8BrjCR2oylrieOXJ3vkSuRAq3kQV ...
解剖Nginx·自动脚本篇（2）设置初始变量脚本 auto/init
在configure中运行完auto/options脚本后,接着运行auto/init脚本,其中所做的工作如下. 1 Makefile文件名变量默认情况下是: objs/Makefile 代码如下: ...
hive单节点数据倾斜解决方法
一.现象 map/reduce程序执行时,reduce节点大部分执行完毕,但是有一个或者几个reduce节点运行很慢,导致整个程序的处理时间很长,这是因为某一个key的条数比其他key多很多(有时是百 ...
由浅到深理解ROS（5）- launch启动文件的理解与编写
ROS提供了一个同时启动节点管理器(master)和多个节点的途径,即使用启动文件(launch file).事实上,在ROS功能包中,启动文件的使用是非常普遍的.任何包含两个或两个以上节点的系统都可 ...
Openssl sess_id命令
一.简介 sess_id指令是一个调试工具,用来处理SSL_SESSION结构的,可以打印出其中的细节二.语法 openssl sess_id [-inform PEM|DER] [-outform ...
[C++] Operator Overload
Operator Overload NOTE1: operator = must be overload as a member function NOTE2: An operator functi ...
冲刺NOIP2015提高组复赛模拟试题（五） 3.破坏基地
3.破坏基地描述 Description 在Z国和W国之间一直战火不断. 好不容易,W国的间谍把完整的Z国的军事基地的地图到手了. 于是W国决定再次出击,一举击破Z国的防线. W国认真研究了Z国的地 ...
往数据库添加的时候（只添加以前未添加的记录的写法）c#
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

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

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

随机推荐

热门专题