javascript伸缩菜单栏实现代码分享

本文实现了点击标题时判断该标题下的菜单是否显示，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来。具体代码如下

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 *{margin:0;
  padding:0;
  font-size:13px;
  list-style:none;}

.menu{width:210px;
  margin:50px auto;
  border:1px solid #ccc;}

.menu p{height:25px;
  line-height:25px;
  font-weight:bold;
  background:#eee;
  border-bottom:1px solid #ccc;
  cursor:pointer;
  padding-left:5px;}

.menu div ul{display:none;}

.menu li{height:24px;
   line-height:24px;
   padding-left:5px;}
</style>
 <script type="text/javascript">
 window.onload=function(){

  // 将所有点击的标题和要显示隐藏的列表取出来
 var ps = document.getElementsByTagName("p");
 var uls = document.getElementsByTagName("ul");

  // 遍历所有要点击的标题且给它们添加索引及绑定事件
 for(var i = 0, n = ps.length; i <n; i += 1){

  ps[i].id = i;
  ps[i].onclick = function(){
   for(var j = 0; j < n ; j += 1){
    uls[j].style.display = "none";
   }
   uls[this.id].style.display = "block";
  }
  // 获取点击的标题上的索引属性，根据该索引找到对应的列表
 }
  // 判断该列表，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来
 }
 </script>
</head>
<body>
 <div class="menu" id="menu">
  <div>
   <p>Web前端</p>
   <ul style="display:block">
    <li>JavaScript</li>
    <li>DIV+CSS</li>
    <li>jQuery</li>
   </ul>
  </div>
  <div>
   <p>后台脚本</p>
   <ul>
    <li>PHP</li>
    <li>ASP.net</li>
    <li>JSP</li>
   </ul>
  </div>
  <div>
   <p>前端框架</p>
   <ul>
    <li>Extjs</li>
    <li>Esspress</li>
    <li>YUI</li>
   </ul>
  </div>
 </div>
</body>
</html>

实例效果：

以上就是为大家分享的javascript伸缩菜单栏实现代码，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • Vue.js 递归组件实现树形菜单（实例分享）

    Vue.js 递归组件实现树形菜单（实例分享）

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m

  • 基于jQuery实现左侧菜单栏可折叠功能

    基于jQuery实现左侧菜单栏可折叠功能

    今天给大家介绍一下左侧菜单栏可折叠功能,在后台管理中左侧菜单折叠功能是特别常见的一个功能,基本不管是什么类型的管理后台都会涉及到这个功能的实现. 今天给大家介绍的是二级可折叠菜单的功能,相对一级的菜单折叠功能就显得稍微比较复杂一点了,我这里将给大家介绍菜单折叠过程中三种变换形式. 第一种变换形式是:不管点击哪一级菜单都可以打开或者关闭本级菜单,但是不会影响其他级别的菜单: <!DOCTYPE html> <html lang="en"> <head>

  • 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学

  • JS实现自动固定顶部的悬浮菜单栏效果

    JS实现自动固定顶部的悬浮菜单栏效果

    本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果.分享给大家供大家参考.具体如下: 这是一款自动固定顶部的悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之类的比较合适吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fix-top-float-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

  • 基于vue.js实现侧边菜单栏

    基于vue.js实现侧边菜单栏

    侧边菜单栏应该是很多项目里必不可少的 自己手写了一个 下面是效果图 下面就说一下实现的过程 还是比较简单的 首先导入一下需要的文件 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" typ

  • 最常见的左侧分类菜单栏jQuery实现代码

    最常见的左侧分类菜单栏jQuery实现代码

    打开京东.淘宝等各大类网站,最常见的就是左侧分类菜单栏了,既然这么常见的功能,那么应该怎么去实现它呢,接下来,我会在js中介绍两种实现方式,一种是引入jQuery的实现方式,一种是不引入jQuery的原生js的实现方式~~ 先看效果: 一.先准备资料 1)如果你们是用jQuery来开发网站的,肯定先要准备jQuery.js呀,这个百度一搜就有.不用jQuery开发的,可以忽略此步骤 2)准备一些图片,鼠标右键 > 图片另存为就可以保存 icon_nav.jpg: img_226x40.jpg:

  • 非常酷的js图形渐隐导航菜单栏

    body { background:#799AE1; margin:0px; font:normal 12px 宋体; } table { border:0px; } td { font:normal 12px 宋体; } img { vertical-align:bottom; border:0px; } a { font:normal 12px 宋体; color:#215DC6; text-decoration:none; } a:hover { color:#428EFF } .sec_

  • Vue.js组件tree实现无限级树形菜单

    Vue.js组件tree实现无限级树形菜单

    分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c

  • 简单实现js菜单栏切换效果

    分享一个小案例,实现菜单栏的切换,点击左侧边栏,展示右侧主体的页面,供大家参考,具体内容如下 首先实现html页面的编写: <div id="header"></div> <div id="main"> <!--左侧边栏--> <div class="affix"> <h4>用户中心</h4> <ul> <li><a href=&qu

  • javascript伸缩菜单栏实现代码分享

    javascript伸缩菜单栏实现代码分享

    本文实现了点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来.具体代码如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0; pad

  • JavaScript图片轮播代码分享

    为大家分享的JavaScript图片轮播代码如下 <!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

  • Javascript面向对象扩展库代码分享

    lang.js库提供了包和类的定义.类的继承与混合(mixin).函数重载等功能,基本可满足大多数面向对象设计的需求.同时支持基于链式的定义方式,让库在使用时更加规范和便捷.下面首先通过简单的例子演示了lang.js的基本功能,之后给出了lang.js的源码及注释. 一.功能介绍 "lang"作为框架的全局定义,其中包括了四个方法: lang.Package(string name) //用于定义包(默认会暴露到全局) lang.Class(string name[, object c

  • 动态加载外部javascript文件的函数代码分享

    复制代码 代码如下: (function (clover) { clover.loadScript = function loadScript(url, callback) { var heads = document.getElementsByTagName('head'); if (heads.length == 0) { alert("page must have one head element"); } var head = heads[0]; var script = do

  • 手机开发必备技巧：javascript及CSS功能代码分享

    1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域, 这是真正有效的区域.由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个: 复制代码 代码如下: width -             //  viewport 的宽度 (范围从200 到10,000,默认为980 像素) height -            //  viewpor

  • JavaScript定时显示广告代码分享

    这是一则定时显示广告的javascript代码,当然也可以定时显示某一区块内容,很实用. 代码如下: 复制代码 代码如下: function strToDate(str, ext) {  if (str == null || str == '') return;  var arys = new Array();  arys = str.split('-');  var newDate = new Date(arys[0], arys[1] - 1, arys[2], 9, 0, 0);  if

  • JavaScript实现找质数代码分享

    好吧,也没有背景说明,没有高深技能,纯粹无聊,想找出10000内的所有质数.那么就开始了: function zhishu(num) { if (num == 1) { return false; } if (num == 2) { return true; } for (var i = 2; i <= Math.sqrt(num); i++) { if (num % i == 0) { return false; } } return true; } 使用实例: var zhishuArray

  • JavaScript图片放大技术(放大镜)实现代码分享

    复制代码 代码如下: <!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=&qu

  • JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）的代码分享

    JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）的代码分享

    效果展示: 代码实现: 控制器 <?php namespace app\controllers; use Yii; use yii\filters\AccessControl; use yii\web\Controller; use yii\filters\VerbFilter; use app\models\LoginForm; use app\models\ContactForm; //use yii\db\ActiveRecord; use yii\data\Pagination; use

  • JS实现横向拉伸动感伸缩菜单效果代码

    JS实现横向拉伸动感伸缩菜单效果代码

    本文实例讲述了JS实现横向拉伸动感伸缩菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS实现的纵向拉伸变横向拉伸,动感伸缩菜单,紧身排列的CSS菜单,可用在博客等重要的位置部分作菜单,学习JavaScript前端设计的也可以作为参考范例. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-row-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

随机推荐