用jquery写的二级menu

最新推荐文章于 2022-02-25 20:00:37 发布
最新推荐文章于 2022-02-25 20:00:37 发布
阅读量130 收藏
点赞数
文章标签： jQuery XHTML C C++ C# ViewUI
<!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>
<script src="./jquery1.2.6.js"></script>
<script type="text/javascript">

$(function()
{
$("tr").each(function(ii)
{
$("tr[id=img" + ii +"]").toggle(function()
{
$(this).find("img").attr("src","./images/e.gif");
for (var i = 3 * (ii - 1); i < 3 * ii; i++)
{

$("#list" + i).show();
}

},
function()
{
$(this).find("img").attr("src","./images/c.gif");
for (var i = 3 * (ii - 1); i < 3 * ii; i++)
{

$("#list" + i).hide();
}
}
);

});

});
</script>
</head>

<body><table width="200" border="0">
<tr id="img1">
<td width="20"><img src="./images/C.gif" style="cursor:pointer"/></td>
<td width="170" style="cursor:pointer">目录头1</td>
</tr>
<tr id="list0" style="display:none">
<td rowspan="3"> </td>
<td><img src="./images/ie.gif" />list1</td>
</tr>
<tr id="list1" style="display:none">
<td><img src="./images/ie.gif" />list2</td>
</tr>
<tr id="list2" style="display:none">
<td><img src="./images/ie.gif"/>list3</td>
</tr>
<tr id="img2">
<td width="20"><img src="./images/C.gif" style="cursor:pointer"/></td>
<td width="170" style="cursor:pointer">目录头2</td>
</tr>
<tr id="list3" style="display:none">
<td rowspan="3"> </td>
<td><img src="./images/ie.gif" />list4</td>
</tr>
<tr id="list4" style="display:none">
<td><img src="./images/ie.gif" />list5</td>
</tr>
<tr id="list5" style="display:none">
<td><img src="./images/ie.gif"/>list6</td>
</tr>
<tr id="img3">
<td width="20"><img src="./images/C.gif" style="cursor:pointer"/></td>
<td width="170" style="cursor:pointer">目录头3</td>
</tr>
<tr id="list6" style="display:none">
<td rowspan="3"> </td>
<td><img src="./images/ie.gif" />list7</td>
</tr>
<tr id="list7" style="display:none">
<td><img src="./images/ie.gif" />list8</td>
</tr>
<tr id="list8" style="display:none">
<td><img src="./images/ie.gif"/>list9</td>
</tr>
</table>

</body>
</html>
bud407
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js|jquery实现动态菜单(二级菜单)
清圆cc的博客
06-10 1420
js|jquery实现动态菜单(二级菜单)
jquery实现二级菜单
朱朱家园
02-22 1480
一种实现： 二级菜单在一级菜单中，采用JQuery实现 衬衫 短袖衬衫 长袖衬衫 短袖T恤 长袖T恤
jquery实现二级导航下拉菜单效果实例
05-20 7790
大家都知道jQuery是一个框架，它对JS进行了封装，使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。 使用JQuery实现需要用到的知识有： 1)使用$(function(){...})获取到想要作用的HTML元素。 2)通过使用children()方法寻找子元素。 3)通过使用show()方法来显示HTML元素。 4)通过使用...
JQuery之封装二级菜单
席木木的博客
02-14 731
JQuery封装二级菜单HTML菜单定义Flex布局样式图JQuery-二级菜单展开/闭合实现最终效果对比图 HTML菜单定义     HTML代码定义如下，样式代码可以根据需要自行调整，重点是下面如何编写JQuery代码。 <ul class="nav"> <li class="main-menu"> <a class="active" href="#"><i class="fa fa-user-p
点击显示二级下拉菜html,jQuery实现二级下拉菜单效果
weixin_42386511的博客
06-03 681
大家都知道jQuery是一个框架，它对JS进行了封装，使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。使用JQuery实现需要用到的知识有：1)使用$(function(){...})获取到想要作用的HTML元素。2)通过使用children()方法寻找子元素。3)通过使用show()方法来显示HTML元素。4)通过使用hide()方法来隐...
jQuery下拉二级菜单导航带图片
11-19
在这个案例中，我们将深入探讨如何使用jQuery创建一个带有图片的下拉二级菜单导航。 首先，我们需要理解基本的HTML结构。一个典型的二级菜单通常由一级菜单项和对应的二级子菜单组成。一级菜单通常包含多个`<li>`...
jQuery垂直下拉二级导航菜单
11-19
接下来，我们要用CSS为菜单添加样式，使其在未激活时隐藏二级菜单，例如： ```css .sub-menu { display: none; } ``` 然后，我们可以利用jQuery来控制这些菜单项的行为。当用户鼠标悬停在一级菜单上时，显示对应...
jQuery鼠标经过二级菜单下拉代码
04-02
在这个场景中，我们讨论的是"jQuery鼠标经过二级菜单下拉代码"，这是一种常见的网页导航菜单设计，它能为用户提供直观且易于使用的界面。 首先，我们要理解这个功能的基本工作原理。当用户将鼠标悬停在一级菜单项上...
jQuery黑色二级下拉导航菜单代码
04-07
而jQuery黑色二级下拉导航菜单代码正是为了实现这一目的，提供了一种高效、美观且响应式的解决方案。这款基于responsive-menu插件的菜单设计，适用于各种设备，从小型手机屏幕到大型桌面显示器，都能提供良好的用户...
Unity 【Content Size Fitter】- 聊天气泡自动适配Text文本框大小
当代野生程序猿
02-25 5486
通常在展示人物对话的时候文本的长度是不定的，因此会需要动态的调整对话内容文本框的背景图片的大小，这里以如下这种气泡框的对话为例： 实现该需求涉及到的内容包括Content Size Fitter组件的使用、2D Sprite工具包的使用。 Content Size Fitter组件用于Text文本框，如图所示，我们将Horzontal Fit设为Preferred Size，当我们调整Text文本框中的内容时，其大小会自动进行调整。 注意Rect Transform中Pivot轴心点的设置
新唐NUC972 Linux（一）：USB烧写linux出厂镜像
小破孩的博客
02-20 3112
USB烧写出厂镜像 文章目录USB烧写出厂镜像前言一、硬件连接二、安装驱动三、烧写linux程序四、运行程序 前言 今天开始进军linux，学了那么久单片机，也摸得七七八八，至少点个灯还是会的。本人之所以买酷客的linux开发板主要是便宜，资料也算齐全，虽然没有原子那么好，不过也够了，找那么多借口，其实就是qiong。今天先从USB烧录官方提供的linux相关程序到芯片开始吧。 一、硬件连接 1、连接电源线 2、RS232转USB，需要安装CH340驱动，用于在电脑串口超级终端中查看调试信息。 3、U
WeChall CTF Writeup（一）
weixin_43211186的博客
02-25 1276
以下题目标题组成： [Score] [Title] [Author] 文章目录0x01 1 Training: Get Sourced by Gizmore0x02 1 Training: Stegano I by Gizmore0x03 1 Training: Crypto - Caesar I by Gizmore0x04 1 Training: WWW-Robots by Gizmore0x05 1 Training: ASCII by Gizmore 0x01 1 Training: Get Sou
C语言每日一练——第126天：佩奇借书问题
热门推荐
Edison's 小宇宙
02-25 2万+
史上最强借书方案问题讲解（代码详解+思路分析+动图演示+特性总结）
CS5261与CS5265功能应用|CS5261替代RTD2171|CS5265替代RTD2172
qq1659747718的博客
02-25 1179
CS5261可以完全替代兼容停产RTD2171,CS5265可以完全替代兼容RTD2172，芯片单价低，整体方案设计简单，整体BOM成本较RTD2171、RTD2172低。
Hello Kafka（八）——Confluent Kafka简介
天山老妖
02-24 8766
一、Confluent Kafka简介 1、Confluent Kafka简介 2014年，Kafka的创始人Jay Kreps、NahaNarkhede和饶军离开LinkedIn创立Confluent公司，专注于提供基于Kafka的企业级流处理解决方案，并发布了Confluent Kafka。Confluent Kafka分为开源版和企业版，企业版收费。 2、Confluent Kafka特性 Confluent Kafka开源版特性如下： （1）Confluent Kafka Connecto
基于System Verilog的同步FIFO实现(一)
qq_40268672的博客
02-22 2975
FIFO，全称First In First Out，它是数字电路设计中一个重要的基本单元，它分为同步FIFO和异步FIFO，所谓同步FIFO，是指读写都是在同一个时钟的驱动下进行的，而异步FIFO读写操作的时钟是分离的，本文主要讲述同步FIFO的实现。 如图，是同步FIFO的一个示意图，它由clk,rst,wr_en,rd_en,full,empty,rdata,wdata等信号构成，其中，full,empty用于指示fifo的状态(空或满)，wr_en,rd_en分别为写使能和读使能信号，在FIFO的设
【钉钉-场景化能力包】CRM系统促进广告平台高效获客
钉钉开发者社区
02-24 1790
服务型企业，公司内部往往存在获客成本高，投资回报率下降，营销难操作，跟进不及时，客户流失严重等问题，这些问题的存在直接关乎到客户体验感及企业的发展，这就需要一套基于CDP客户数据平台与CRM解决方案，可对接主流广告投放平台，完成客户全生命周期的跟进和管理。
jquery左侧二级菜单
最新发布
06-28
jQuery 左侧二级菜单通常是一个常见的网页布局组件，用于导航栏设计，它允许用户在一个主菜单中点击某个选项后，展开更详细的子菜单。使用 jQuery 可以方便地实现这种动态效果，通常步骤如下： 1. HTML 结构：创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值