Javascript显示和隐藏ul列表的方法


Posted in Javascript onJuly 15, 2015

本文实例讲述了Javascript显示和隐藏ul列表的方法。分享给大家供大家参考。具体如下:

<ul id="rightNav">
 <li>
 <h2 class="rightNavItem"><a href="#">Show & Hide</a></h2>
 <ul>
 <li><a href="">Links etc here</a></li>
 </ul>
 </li>
</ul>
<script>
function enableRightNavExpand() {
 if (!document.getElementById) return false;
 if (!document.getElementById("rightNav")) return false;
 var nav = document.getElementById("rightNav");
 var navItem = nav.getElementsByTagName("li");
 for (var i = 0; i < navItem.length; i++){
  navItem[i].onclick=function() {
   if (this.className == "selected") {
    this.className = "";
   }
   else if (this.className == ""){
    this.className = "selected";
   }
  }
 }
}
</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
JavaScript Date对象详解
Mar 01 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
webpack 动态批量加载文件的实现方法
Mar 19 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
使用js和canvas实现时钟效果
Sep 08 Javascript
jQuery实现提示密码强度的代码
Jul 15 #Javascript
浅谈javascript中return语句
Jul 15 #Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 #Javascript
javascript实现在线客服效果
Jul 15 #Javascript
jQuery实现的进度条效果
Jul 15 #Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 #Javascript
jQuery的事件委托实例分析
Jul 15 #Javascript
You might like
Content-type 的说明
2006/10/09 PHP
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
使javascript也能包含文件
2006/10/26 Javascript
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
python简单实现旋转图片的方法
2015/05/30 Python
python处理xml文件的方法小结
2017/05/02 Python
python实现京东秒杀功能
2018/07/30 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
车间调度岗位职责
2013/11/30 职场文书
开学典礼主持词
2014/03/19 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
2014年度工作总结报告
2014/12/15 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python