js_css_dl.dt实现列表展开、折叠效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>展开、折叠</title>
<style type="text/css">
/*缩进：展开内容*/
dl dd {
    margin: 10px;
}
/* 指定高度：16px（16px只有一行文字高度，所以只显示一行）;指定超出部分：隐藏 */
dl {
    height: 16px;
    overflow: hidden;
}
</style>

</head>

<body>
    <!--
        思路：
        1：标签封装数据，
        2：定义样式
        3：明确事件源，事件，以及处理节点，dom
        4：明确具体操作方式
     -->
    <script type="text/javascript">
        //初始style是hidden;
        var isHidden=true;
        function list(){
            //获取dl节点
            var oDlNode=document.getElementById("dl0");
            if(isHidden){
                oDlNode.style.overflow="visible";
                isHidden=false;

                alert(isHidden);
            }else{
                oDlNode.style.overflow="hidden";
                isHidden=true;
            }
        }
    </script>
    <dl id="dl0">
        <dt onclick="list()">显示条目1</dt>
        <dd>展开内容1.1</dd>
        <dd>展开内容1.2</dd>
        <dd>展开内容1.3</dd>
        <dd>展开内容1.4</dd>
        <dd>展开内容1.1</dd>
        <dd>展开内容1.2</dd>
        <dd>展开内容1.3</dd>
    </dl>
</body>
</html>

时间： 2024-07-30 18:54:41

js_css_dl.dt实现列表展开、折叠效果的相关文章

实现列表展开收起效果

$(".btn").click(function () {$(this).parents("当前元素最外层div的class").toggleClass("showDiv").siblings().removeClass("showDiv");});css:.最外层div class .需要收起展开的div的class{display: none;}.showDiv .需要收起展开的div的class{display: blo

jquery 展开折叠效果

仅供参考图片 jquery.js 自己处理 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>在此处插入标题</title&

【转】 HVTableView创建--展开/折叠列表能 AAShareBubbles社会分享动画组

原文: http://blog.csdn.net/billfanggs/article/details/17279969 HVTableView HVTableView是UITableView(带有展开/折叠功能)的子集,可以方便地用在很多app中.开发者可以使用展开/折叠列表而不用为每个单元格创建一个详细的viewController,从而节省开发时间.这意味着每个单元格的详细信息可以即刻展示在表格中,而不用切换至另外一个视图才能查看详细信息. 附件: /cms/uploads/soft/

Bootstrap基础7（标签、徽章、大屏展播、页面标题、缩略图、进度条、面板、折叠效果）

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>标签.徽章.

jquery垂直展开折叠手风琴二级菜单

最近新开发一个简单项目,用到左侧两级的菜单.习惯性的去网上扒jquery手风琴效果,结果悲剧了好久…… 是该认认真真去学jquery,练习自己写动画效果了.从理解别人代码开始吧! 注:jquery-1.8.3.min.js需要下载文件放到同级名为js的文件夹里. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery垂直展开折叠手风琴效果</title> <s

Material Design之利用CollapsingToolbarLayout轻松实现知乎日报新闻详情页顶部效果（带banner的toolbar伸缩折叠效果）

我们都知道CoordinatorLayout+AppBarLayout可以轻松实现滚动隐藏ToolBar的效果,今天我们要讲的是CollapsingToolbarLayout+ CoordinatorLayout+AppBarLayout实现带Banner的Toolbar折叠效果----向上滚动时,Banner会随着滚动手势向上收缩至隐藏,Banner上的文字(实际上是CollapsingToolbarLayout上的文字)会逐渐缩小最后显示在Toolbar上,向下滚动时,Banner会逐渐显

jquery实现的点击可以展开折叠的垂直导航菜单

jquery实现的点击可以展开折叠的垂直导航菜单:本章节介绍一种比较常见的导航菜单是如何实现的,它具有垂直结构,点击导航主标题可以展开或者折叠二级菜单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

实现类似QQ的折叠效果

// 主要核心是点击自定义header来展开和收起每一组里面的cell,模型里面应该有isShow此属性来记录开展还是收起. // ViewController.m// 实现类似QQ的折叠效果//// Created by skg_Myfly on 16/3/3.// Copyright © 2016年 skg_Myfly. All rights reserved.// #import "ViewController.h" #import "QQCellModel.

用HTML+CSS实现--折叠效果

下图是一个Accordion组件,请用HTML+CSS实现其UI,并用面向对象的思路把折叠效果JS实现.如果能用纯css的方式实现其折叠效果更佳.PS/这是小米15年的一道校招笔试题,无意间看到就实现了一下. 这个题让最好用css实现,那就考察的知识点比较多啦!特别是css选择器这一块.具体实现代码如下. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>纯