js实现二级栏目

最新推荐文章于 2021-06-08 22:15:02 发布
最新推荐文章于 2021-06-08 22:15:02 发布
阅读量331 收藏 1
点赞数
分类专栏： web 文章标签： js 二级栏目 折叠菜单 JavaScript web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zenmoyang/article/details/50393919
版权

通过单击某菜单前面的+、-符号，可以折叠、显示菜单，效果如下图。

<!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>
<link href="css/content.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.οnlοad=function()
{
var change=document.getElementsByName('change');
  
for(var i=0;i<change.length;i++)
{
var tag=true;
change[i].οnclick=function()
{ 
var tags=tag;
if(tags==true&&this.nextSibling.nextSibling.style.display!="none")
{
this.src="images/tree_folder4.gif";
   this.nextSibling.nextSibling.style.display="none";
   tags=false;
}
else
{
this.src="images/tree_folder3.gif";
   this.nextSibling.nextSibling.style.display="block";
   tags=true;
}


}

}
}
  
</script>
</head>


<body>
<div class="warp">    
      <div class="right">
       <div class="tree" >
        <ul>
        <li>本科
        <ul id="menu">
        <li>
        <img src="images/tree_line2.gif" valign="abvmiddle"/>
        <img src="images/tree_folder3.gif" valign="abvmiddle" class="tag" name="change"/>经贸学院
        <ul class="thirdMenu">
        <li class="third">
        <img src="images/tree_line4.gif" valign="abvmiddle"/>
        <img src="images/tree_line2.gif" valign="abvmiddle"/>
        <span>[文理]</span> <a href="#">国际经济与贸易</a>
        </li>
<li>
<img src="images/tree_line4.gif" valign="abvmiddle"/>
<img src="images/tree_line2.gif" valign="abvmiddle"/>
<span>[理工]</span> <a href="#"> 经济统计学</a>
</li>
<li>
<img src="images/tree_line4.gif" valign="abvmiddle"/>
<img src="images/tree_line2.gif" valign="abvmiddle"/>
<span>[文理]</span> <a href="#"> 金融学</a>
</li>
        </ul>
        </li>
        <li>
        <img src="images/tree_line2.gif" valign="abvmiddle"/>
        <img src="images/tree_folder3.gif" valign="abvmiddle" class="tag"  name="change"/>
        法政学院
        <ul class="thirdMenu">
        <li class="third">
        <img src="images/tree_line4.gif" valign="abvmiddle"/>
        <img src="images/tree_line2.gif" valign="abvmiddle"/>
        <span>[文理]</span><a href="#"> 国际经济与贸易</a>
        </li>
<li class="third">
<img src="images/tree_line4.gif" valign="abvmiddle"/>
<img src="images/tree_line2.gif" valign="abvmiddle"/>
<span>[理工]</span>  <a href="#">经济统计学</a>
</li>
<li class="third">
<img src="images/tree_line4.gif" valign="abvmiddle"/>
<img src="images/tree_line2.gif" valign="abvmiddle"/>
<span>[文理]</span>  <a href="#">金融学</a>
</li>
        </ul>
        </li>
        <li>
        <img src="images/tree_line2.gif" valign="abvmiddle"/>
        <img src="images/tree_folder3.gif" valign="abvmiddle" class="tag"  name="change"/>
        会计学院
        <ul class="thirdMenu">
        <li class="third">
        <img src="images/tree_line4.gif" valign="abvmiddle"/>
        <img src="images/tree_line2.gif" valign="abvmiddle"/>
        <span>[文理]</span> <a href="#">国际经济与贸易</a>
        </li>
<li class="third">
<img src="images/tree_line4.gif" valign="abvmiddle"/>
<img src="images/tree_line2.gif" valign="abvmiddle"/>
<span>[理工]</span> <a href="#"> 经济统计学</a>
</li>
<li class="third">
<img src="images/tree_line4.gif" valign="abvmiddle"/>
<img src="images/tree_line2.gif" valign="abvmiddle"/>
<span>[文理]</span> <a href="#"> 金融学</a>
</li>
        </ul>
        </li>
        <li>
        <img src="images/tree_line2.gif" valign="abvmiddle"/>
        <img src="images/tree_folder3.gif" valign="abvmiddle" class="tag"  name="change"/>
        商学院
        <ul class="thirdMenu">
        <li class="third">
        <img src="images/tree_line4.gif" valign="abvmiddle"/>
        <img src="images/tree_line2.gif" valign="abvmiddle"/>
        <span>[文理]</span> <a href="#">国际经济与贸易</a>
        </li>
<li class="third">
<img src="images/tree_line4.gif" valign="abvmiddle"/>
<img src="images/tree_line2.gif" valign="abvmiddle"/>
<span>[理工]</span> <a href="#"> 经济统计学</a>
</li>
<li class="third">
<img src="images/tree_line4.gif" valign="abvmiddle"/>
<img src="images/tree_line2.gif" valign="abvmiddle"/>
<span>[文理]</span> <a href="#"> 金融学</a>
</li>
        </ul>
        </li>
        </ul>
        </li>
        </ul>
        </div>
      </div>
      
</body>
</html>



效果图：

3232

の333

Rongen123
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现二级菜单
weixin_43729867的博客
02-13 2867
第一次尝试使用JS实现一个二级菜单栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
html 二级栏目js代码,JS二级菜单不同实现方法分析【4种方法】
weixin_34207925的博客
06-08 676
本文实例讲述了JS二级菜单不同实现方法。分享给大家供大家参考，具体如下：之前面试的时候被问到过一次，后来，在笔试的时候又遇到了，为了长点记性，就决定把这个好好写写。第一种：第一种是采用css来控制的；主要采用float，和position,display，hover来完成的。具体看以参看后面的源代码。第二种：主要采用hover,和display来实现的。第三种：采用的是js来控制的，mouseov...
javascript.和ajax实现二级联动菜单
11-25
1、javascript实现二级联动：运用jsp标签拼写Javascript代码，实现一个二维数组，点击一级栏目时，查询二维数组里，符合一级栏目的value ，放到二级栏目里 2，ajax实现的二级联动：利用Ajax与后台程序实现异步交互，后台程序拼写JOSN字符串，发送到客户端。
html 二级栏目js代码,实现js二级菜单
weixin_39584405的博客
06-08 330
图片发自简书App我们先来说一下，二级菜单：应用较为广泛，在我们熟知一些购物网站，选择分类时会用到二级三级甚至更多，供我们选择，较为方便。下面我们就开始：图片发自简书App样式写出我们要表现出的样式body,ul {margin: 0;padding: 0;}.active {background-color: mediumvioletred;color: #fff;}ul {margin-top...
js实现进入二级页面后仍然选中菜单栏中的某个菜单（二级页面与菜单栏绑定）
会飞的象的博客
10-11 3304
  前言 我们通常在点击左侧菜单栏的某个菜单后，会进入一个页面，并将该菜单选中高亮显示； 但是往往在一个页面中，会链接到其他页面，通过第一个页面进入第二个页面后，怎么才能让该菜单仍然是选中且高亮显示的状态呢？ 用到的知识点 1.addclass("active")，给菜单的class添加active属性； 2.var _sitemap = new Array();，定义一个数组，存入当...
js实现二级菜单点击显示当前内容效果
10-18
本文将详细介绍如何使用JavaScript实现二级菜单点击时显示当前内容的效果。这个功能对于提升用户体验和增强网站的可操作性至关重要。 首先，我们需要了解HTML结构。在这个示例中，一级菜单由`<ul>`中的`<li>`元素...
jquery二级三级多级栏目导航代码.zip
08-19
本资源"jquery二级三级多级栏目导航代码.zip"提供了一个实现二级和三级多级栏目导航的示例，对于学习和应用jQuery特效的开发者来说非常实用。 首先，我们要理解jQuery是如何处理多级导航的。在HTML结构中，通常使用...
顶部固定、二级栏目之间相互滑动的导航菜单样
06-05
综上所述，"顶部固定、二级栏目之间相互滑动的导航菜单样式"是一种提高用户体验的设计手法，它结合了HTML、CSS和JavaScript的技术，实现了导航栏在页面滚动时始终保持可见，以及二级栏目的动态展现。在压缩包中的...
vue实现鼠标移过出现下拉二级菜单功能
10-15
在 Vue 中实现鼠标移过出现下拉二级菜单的功能，可以通过结合 Vue 的响应式系统、条件渲染（v-if 或 v-show）以及 CSS 过渡动画来实现。下面我们将详细探讨如何实现这一功能。 首先，Vue 提供了 `transition` 组件...
jquery带二级下拉子栏目导航代码.zip
07-11
在jQuery中，二级下拉子栏目导航的实现主要依赖于JavaScript的事件处理和DOM操作。首先，我们需要创建HTML结构，通常是一个`<ul>`列表，包含多个一级菜单项`<li>`，每个一级菜单项下再嵌套一个`<ul>`用于存放二级...
左侧多级子栏目纯JavaScript
04-13
左侧多级子栏目 是纯js写的，不过css比较多些
纯html+css+jquery的响应式二级栏目导航demo
03-18
响应式导航源码，可更改各种样式，仅有一点css和js需要导入，灵活好用。
简单网页作业+二级页面
11-13
用Dreamweaver做的，包含div-css、javascript、简单table，适合在此基础上加以修改完成作业。
dedecms获取当前栏目的顶级栏目名称、二级栏目名称（当前顶级栏目的第二级栏目名称）实现方法
lizige2008的博客
04-07 422
最近在做dedecms织梦项目时要获取当前栏目的顶级栏目，和当前栏目顶级栏目的第二级栏目。 这时我们需要写代码来操作： 1.获取当前栏目的顶级栏目名称 在include/common.func.php的最下方加入以下代码 function GetTopTypename($id) { global $dsql; $row = $dsql->GetOne("SELECT typename,topid FROM dede_arctype WHERE id= $id"); if ($row['topi.
最简单的纯js实现点击展开二级菜单功能
热门推荐
well2049的博客
05-16 2万+
虽然，jQuery已经非常好用了，但是实际的开发项目中，还是有很多限制，比如项目组奇葩的要求，不能使用任何插件，当然，也是考虑插件占用资源，毕竟100+KB对与小型项目来说还是非常大的。我最近就遇到做个点击展开二级菜单的要求，当然只能用原生的JS去写来实现，我借鉴了网上的一个案例，补充一下，分享一下： 如果，默认打开页面进来时二级菜单是隐藏的，需要点击才能展现二级菜单，再点击就是隐藏二级菜单。这
phpcms调用一级栏目和二级栏目
weixin_33739541的博客
01-08 286
{loop subcat(0,0,0,$siteid) $r} {php $num++} &lt;strong&gt;&lt;a href="{$r[url]}"&gt;{$r[catname]}&lt;/a&gt;&lt;/strong&gt; &lt;font&gt; {pc:content action="category" catid="$r[arrchild
DedeCMS 实现导航条悬停显示二级栏目下拉菜单
Yan 小铁匠
07-10 2559
2019年7月10日 星期三 阴 织梦DedeCMS v5.7 如何实现导航条悬停显示二级栏目下拉菜单 首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行，位置无所谓) <!-- //二级子栏目下拉菜单 ，可随意放置于页面底部 --> <script type='text/javascript' src='{ded...
dedecms调用某一顶级栏目下二级标签
张营的技术博客
06-20 678
从顶级栏目点进去，一般是显示列表页，再点击文章可以显示内容页，但是有时候会在列表页前面在加一个频道封面页，因为这个顶级栏目下还有几个子栏目，又不能把各个子栏目全部显示在列表页，这样就乱了，所以一般会有个频道封面页来显示各个模块，每个模块再显示几个文章，再加一个更多的按钮。这样其实可以直接循环顶级栏目的每个子栏目，但是这是在样式一样的情况下，万一布局不同就需要一个一个写。index_article.h
js二级导航的一些补充
weixin_38269675的博客
03-29 583
因为想给一级菜单设置一个半透明的背景（这个版透明背景在有背景图的情况下是可以穿透的显示背景图的）。所以单独用一个名为bg的盒子去装载这一个背景层。 设置的时候 背景色使用rgba可以调节背景图的透明度，额外的opacity可以在原基础上再进一步的调节透明度。 先设置主菜单，因为每一个菜单项，都要绑定一个onmouseover事件，所以每一个一级菜单都要用一个div盒子装载起来（na...
js实现二级菜单导航+轮播图
最新发布
01-06
3. 编写JavaScript代码：利用JavaScript来实现二级菜单导航的交互和轮播图的效果。可以通过事件监听器来监听鼠标悬停等事件，实现二级菜单的显示和隐藏。同时，可以使用定时器和动画效果来实现轮播图的自动切换和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值