JavaScript中list的简单使用<菜单>

最新推荐文章于 2023-09-02 11:41:55 发布
最新推荐文章于 2023-09-02 11:41:55 发布
阅读量747 收藏
点赞数
分类专栏： 学习笔记 文章标签： javascript

很简单的一个使用：点击菜单，能够显示下面的或者不显示

1，主要目的：： 展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容

用到的是 overflow：hidden 和 overflow=”visible”这两个属性 在点击的function中，设置属性应该

node.style.overflow=”visible”;当然设置tr的高度也是很重要的，要恰好让其他的选项隐蔽

2，采用同样的技术，多加几个，但是就是传参数比较麻烦，采用this传参很常用

[html] view plaincopyprint?

<!DOCTYPE html>  
<html>  
  <head>  
    <!-- 1，主要目的：： 展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容  
    用到的是 overflow：hidden    和  overflow="visible"这两个属性 在点击的function中，设置属性应该  
    node.style.overflow="visible";  
        2，采用同样的技术，多加几个，但是就是传参数比较麻烦  

    -->  
    <title>list.html</title>  

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    <style type="text/css">  
            dl{  
                height:18px;/*优先级问题，必须要写*/  
                overflow:hidden;  
            }  
            dd{  
                margin:0px;  
                padding:0px;  
            }  
            .close{  
                height:18px;/*优先级问题，必须要写*/  
                overflow:hidden;  
            }  
            .open{  
                height:80px;  
                overflow:visible;  
                background-color:#ff8000;  
                }  

    </style>  
        <script type="text/javascript">  

                    function click2(node1){  
//                      alert("aa"+node.nodeName);// td  
                        var nodes=node1.parentNode;  
//                      alert(nodes.nodeName);  
                    //  alert("aa"+nodes.className);  
                        //※※通过传进的对象 判断采用哪种css模式  
                        if(nodes.className=="open"){  
                            nodes.className="close";  
                        }else{  
                            nodes.className="open";  
                        }  
                    }  
        </script>  


  </head>  
  <body>  
    <!--层次列表-->  
    <!--当很多时候采用传参就很麻烦,每个都需要去传参  
    <dl>  
        <dt onclick="click1(0)">菜单条1</dt>  
        <dd>菜单1</dd>  
        <dd>菜单2</dd>  
        <dd>菜单3</dd>  
        <dd>菜单4</dd>  
    </dl>  
    <dl>  
        <dt onclick="click1(1)">菜单条2</dt>  
        <dd>菜单11</dd>  
        <dd>菜单22</dd>  
        <dd>菜单33</dd>  
        <dd>菜单44</dd>  
    </dl>  
    <dl>  
        <dt onclick="click1(2)">菜单条3</dt>  
        <dd>菜单12</dd>  
        <dd>菜单23</dd>  
        <dd>菜单34</dd>  
        <dd>菜单45</dd>  
    </dl>  
    -->  

    <br/>  
    <br/>  
    <hr/>  


    <!--<dl class="close">先手动采用css测试，可以然后采用编程使用-->  
    <dl>  
        <dt onclick="click2(this)">1菜单条1</dt>  
        <dd>菜单1</dd>  
        <dd>菜单2</dd>  
        <dd>菜单3</dd>  
        <dd>菜单4</dd>  
    </dl>  
    <dl>  
        <dt onclick="click2(this)">2菜单条2</dt>  
        <dd>菜单11</dd>  
        <dd>菜单22</dd>  
        <dd>菜单33</dd>  
        <dd>菜单44</dd>  
    </dl>  
    <dl>  
        <dt onclick="click2(this)">3菜单条3</dt>  
        <dd>菜单12</dd>  
        <dd>菜单23</dd>  
        <dd>菜单34</dd>  
        <dd>菜单45</dd>  
    </dl>  
  </body>  
</html>

点击前：
这里写图片描述

点击后：颜色设置是css设置的
这里写图片描述

宋紫锦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js编写list控件（参照网上原型用法）
倦鸟归时
03-16 1575
function map() { this.keys = []; this.values = []; } map.prototype.push = function(key,value) { if(this.exist(key) == -1) { this.keys.push(key); this.values.push(value); } } map.p
网页前端设计-作业一（HTML5）
qq_61727355的博客
08-18 6285
1 .普通（2分）HTML5新增的格式标签有哪些？HTML5新增的格式标签如下： 记号标签：可用于突出显示指定区域的文本内容，底色默认为黄色效果； 进度标签：可用于显示任务的进度状态，可以配合JS使用以显示任务进度的动态进行效果； 度量标签：可用于显示标量测量结果，通常用于显示磁盘的使用量、投票数据统计等。
JavaScript中list的用法
最新发布
qq_45571306的博客
09-02 1188
并不是一个内置的关键字或数据结构。这可能是你尝试在某个特定的环境或者框架中使用它，比如Arraylist或其他特定的库。然而，最常见的与列表相关的JavaScript对象是数组（Array）。JavaScript的数组是一种特殊的对象，用于存储一系列有序的元素。在JavaScript中，
js中list的常用方法
热门推荐
weixin_44399906的博客
03-30 1万+
sort：高效的排序方法，对原数组进行修改 list.sort(function (a, b) { return a - b; //ruturn 1 为小到大，-1为大到小 }) contact: 拼接list,返回结果，不修改原数组，浅拷贝 list.contact(list1,list2) // 参数可为0，1，2个数组 splice: 删除数组元素，改变原数组，返回被删元素，浅...
js 实现List
dianchengsn076644的博客
09-01 782
js 实现List 列表是一组有序的数据。每个列表中的数据项称为元素。在 JavaScript 中，列表中的元素可以是任意数据类型。 我们可以根据数组的特性来实现List。 List 抽象数据类型定义 listSize（属性） 列表的元素个数 pos（属性） 列表的当前位置 length（属性） 返回列表中元素的个数 clear（方法） 清空列表中的所有元素 toString（方法...
<div id="toolbar" class="cesium-viewer-toolbar"> <div class="cesium-button cesium-toolbar-button"> <img src="icons/menu.png"> </div> <div class="cesium-toolbar-dropdown"> <ul> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> </ul> </div></div> 增加点击打开
05-09
您可以使用 JavaScript 代码将菜单项添加打开和关闭功能，具体代码如下： ```javascript var toolbar = document.getElementById("toolbar"); var dropdown = toolbar.querySelector(".cesium-toolbar-dropdown"); ...
JavaScript 下拉菜单实现代码
10-29
一个基本的下拉菜单通常包含一个主级`<ul>`标签，其中嵌套着若干个`<li>`元素，每个`<li>`可能包含一个次级`<ul>`用于展示下拉选项。以下是一个简单的示例： ```html <ul id="navigation"> <li><a href="#">菜单1...
<input type="text" id="menu-item"><button onclick="addItem()">Add Item</button><ul id="menu-list"></ul>用JavaScript给这个输入框加一个下拉菜单
05-26
可以使用以下代码实现： ...JavaScript代码使用`createElement`函数来创建新的列表项和选项，并使用`appendChild`函数将它们添加到相应的父元素中。最后，代码清空输入框的值，以便用户可以轻松地添加多个选项。
JavaScript实现简单的鼠标滑过下拉菜单源码
05-18
本文将深入探讨如何使用JavaScript实现一个简单的鼠标滑过下拉菜单。 首先，我们需要了解基本的HTML结构来创建下拉菜单。一个基本的下拉菜单由`<ul>`（无序列表）元素和嵌套的`<li>`（列表项）元素组成。例如： ``...
JS List的contains方法与Array的contains方法的使用
10-22
List的contains方法、Array的contains方法的使用
js中的类似于java对象List的工具List.js
11-01
js中终于有了自己的List，类似于java中的List对象，本文件是源码，亲测有如下方法：add()、value、size()、get(index)、contains(key)、remove(index)、removeAll()。。。
JavaScript数据结构 —— 列表List
weixin_48920282的博客
12-20 1万+
2.1 —— List的简述 列表是一组有序的数据，每个列表中的数据项称为元素。 列表拥有描述元素位置的属性，列表有前有后（front和end）。 使用next()方法可以从当前元素移动到下一个元素，使用next（） 可以从当前元素移动到下一个元素，使用prev()方法可以移动到当前元素的前一个元素，还可以使用moveTo(n)方法直接移动到指定位置 2.1 —— List的方法 定义的属性有： listSize : 列表的元素个数 pos： 列表的当前位置 定义的方法有: getE
js—列表的使用
weiweitb8的博客
09-14 7198
1.列表的实现 function List() { this.listSize=0; this.pos=0; this.dataStore=[]; this.clear=clear; this.find=find; this.toString=toString; this.insert=insert; this.append=ap
JS中的List
裂缝中的阳光、的博客
12-23 1819
//List定义   function List(){     this.table=new Array();   }   //get方法   List.prototype.get=function(i){     return this.table[i];   }   //add方法   List.prototype.add=function(o){       this.t
JS List 列表
JunChow
03-28 7203
数据结构 日常生活中使用列表如：待办事项、购物清单、榜单排名等。计算机程序也在使用列表，尤其是列表中保存的元素不是太多时。当不需要在一个很长的序列中查找元素，或对其进行排序时，列表显得尤为有用。反之，如果数据结构非常复杂，列表的作用就没有那么大了。 列表是一种最自然的数据组织方式，如果数据存储的顺序不重要，也不必对数据进行查找，那么列表就是一种再好不过的数据结构。 抽象...
javascript实现list
yangjun_yh的博客
10-08 1518
((function (factory) {//使用了amd模块化编程的情况下,定义名称为List的module,在依赖了List的module中使用new List()来创建链表if (typeof define === "function" && define.amd) {define(factory);} else {//未使用amd模块化编程的情况下,在window进行下全局定义,任何地方
js实现List的部分功能
机器学习菜鸟
10-01 2873
/** * js模拟java中的List * */ //var list = new Array(); /** * 添加 * @param {Object} object */ function add(list,object) { list[list.length] = object; } /** * 移除此列表中指定位置上的元素。 * @param index 指
前端Js常见的List函数集合
小心——博客
05-30 6590
前端Js常见的数组函数集合
优化下面的代码，解决数据显示区域被侧边栏挡住部分的情况，然后解决大模块展开后与第一个子模块在一起的情况<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>后台管理界面示例</title> <style> body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } header { background-color: #333; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 20px 20px; position: fixed; top: 0; left: 0; right: 0; z-index: 1; } header h1 { margin: 0; font-size: 24px; } header .user { display: flex; align-items: center; cursor: pointer; } header .user img { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; } .sidebar { background-color: #eee; position: fixed; top: 70px; left: 0; bottom: 0; width: 200px; padding: 10px; overflow: auto; z-index: 1; } .sidebar h2 { margin: 0; font-size: 18px; margin-bottom: 10px; } .sidebar ul { padding: 0; margin: 0; list-style: none; } .sidebar li { margin-bottom: 5px; } .sidebar a { display: block; padding: 5px 10px; color: #333; border-radius: 5px; text-decoration: none; background-color: #fff; transition: background-color 0.2s ease-in-out; } .sidebar a:hover { background-color: #ddd; } .content { margin: 60px 0 0 20px; padding: 10px; background-color: #f5f5f5; min-height: 100vh; margin-left: 200px; } </style> </head> <body> <header> <h1>中央管理平台</h1> <div class="user"> <img src="user.png" alt=""> <span>未登录</span> </div> </header> <div class="sidebar"> <h2>功能模块</h2> <ul> <li> <a href="#">用户管理</a> <ul> <li><a href="#">添加用户</a></li> <li><a href="#">删除用户</a></li> <li><a href="#">修改用户</a></li> </ul> </li> <li> <a href="#">数据库管理</a> <ul> <li><a href="#">备份数据库</a></li> <li><a href="#">还原数据库</a></li> </ul> </li> <li> <a href="#">页面管理</a> <ul> <li><a href="#">添加页面</a></li> <li><a href="#">删除页面</a></li> <li><a href="#">修改页面</a></li> </ul> </li> </ul> </div> <div class="content"> <!-- 这里是内容区域 --> </div> <script> // 模拟后端数据传来时，只刷新头部和侧边栏之外的区域 setTimeout(() => { document.querySelector('.content').innerHTML = '<h2>欢迎使用中央管理平台</h2><p>这里是内容区域，只有在后端有数据传来时才会刷新。</p>'; }, 3000); </script> </body> </html>
05-29
document.querySelector('.content').innerHTML = '<h2>欢迎使用中央管理平台</h2><p>这里是内容区域，只有在后端有数据传来时才会刷新。</p>'; adjustContentMargin(); // 内容区域高度可能会变化，需要重新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值