<!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>
分享到：
相关推荐
在这个案例中，我们将深入探讨如何使用jQuery创建一个带有图片的下拉二级菜单导航。 首先，我们需要理解基本的HTML结构。一个典型的二级菜单通常由一级菜单项和对应的二级子菜单组成。一级菜单通常包含多个`<li>`...
本项目“jquery仿京东二级级联菜单导航”旨在实现一个类似京东商城的下拉二级菜单，利用jQuery库来增强用户体验。这个功能通常用于大型网站，尤其是电商网站，因为它们通常具有多级分类，通过级联菜单可以有效地展示...
2. jQuery事件：使用jQuery的`hover`事件监听用户的鼠标悬停，当鼠标进入菜单项时，触发下一级菜单的显示；离开时，隐藏菜单。同时，为了防止快速移动鼠标导致的闪烁，可以设置适当的延迟。 3. 动画效果：利用...
标题“jquery点击向上弹出二级菜单，再点击隐藏”涉及到的是使用jQuery来实现一个交互式二级菜单的功能，这个功能在很多网站的导航栏设计中常见。下面将详细介绍如何使用jQuery实现这一功能，以及相关的知识点。 ...
在这个主题中，我们将探讨如何使用CSS（层叠样式表）和jQuery（一个流行的JavaScript库）来实现一个水平二级菜单。这个菜单不仅美观，而且能为用户提供清晰的导航结构，帮助他们轻松浏览网站内容。 首先，我们从CSS...
接下来，我们要用CSS为菜单添加样式，使其在未激活时隐藏二级菜单，例如： ```css .sub-menu { display: none; } ``` 然后，我们可以利用jQuery来控制这些菜单项的行为。当用户鼠标悬停在一级菜单上时，显示对应...
本主题将深入探讨如何使用jQuery来实现二级菜单，这是一种常见的网页交互效果，能帮助用户更高效地探索网站内容。 jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理以及动画效果。在实现二...
然后，使用jQuery来控制二级菜单的显示和隐藏。当鼠标悬停在主菜单项上时，显示对应的子菜单；当鼠标离开时，隐藏子菜单。以下是一个基本的jQuery代码示例： ```javascript $(document).ready(function() { $('#...
在网页设计中，导航菜单是用户与网站交互的重要部分，尤其在内容丰富的网站中，二级菜单的使用可以有效地组织和展示信息。"jQuery鼠标经过二级菜单下拉代码"是一个专门针对这种需求设计的代码实现，它利用jQuery库和...
本教程将深入讲解如何使用jQuery来实现鼠标滑过显示二级下拉菜单的代码实现。 首先，我们需要了解HTML结构。一个基本的二级下拉菜单通常由`<ul>`元素构建，其中包含一级菜单项`<li>`，每个一级菜单项内嵌套另一个`...
在网页设计中，导航菜单是用户与网站交互的重要部分，尤其是一级和二级下拉菜单，它们能够有效...文件 "jquery二级下拉菜单导航代码19" 很可能包含了实现这个功能的具体代码示例，你可以参考并根据自己的需求进行调整。
使用jQuery来实现鼠标悬浮显示二级菜单的动态效果，需要编写适当的JavaScript代码。在此示例中，通过定义`dropMenu`函数来控制菜单的行为。这个函数会遍历所有传入的元素，并为它们绑定鼠标悬停事件。 ```...
使用jQuery，我们可以轻松实现动态展开和折叠二级菜单，通过监听事件（如mouseover和mouseout）来控制子菜单的显示与隐藏。 然后，我们要讨论的是“缓冲”效果。在菜单的展开和折叠过程中，缓冲效果使得动画更加...
在这个"CSS+JQuery+XML二级菜单"的示例中，我们将深入探讨这三种技术如何协同工作来实现这一功能。 首先，CSS（层叠样式表）是网页设计的基础，用于定义页面元素的样式，如字体、颜色、布局等。在二级菜单的设计中...
JQuery 是一个广泛使用的JavaScript库，简化了DOM操作、事件处理和动画效果，因此它非常适合用来创建交互式的二级菜单。本教程将详细介绍如何使用JQuery自定义二级菜单。 首先，我们需要了解JQuery的基本用法。...
本文将深入探讨如何使用jQuery来创建一个适用于左侧产品展示的带有二级菜单的导航系统。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理以及动画效果，使得开发者能够更高效地构建交互式的Web界面。 ...
在使用jQuery Metro二级导航菜单之前，首先需要在项目中引入jQuery库和jQuery Metro的CSS及JS文件。通常，这可以通过在HTML文件的`<head>`部分添加以下链接和脚本完成： ```html <link rel="stylesheet" href="...
如果希望二级菜单在达到一定数量后自动显示滚动条，可以使用jQuery计算子菜单的高度，并根据实际需求调整： ```javascript function setSubMenuHeight() { var submenu = $('.sub-menu'); if (submenu.children()...
本教程主要聚焦于使用jQuery实现的经典二级横向导航菜单。这个“jquery经典二级横向导航菜单代码6”是一个精心设计的示例，旨在提供强烈的视觉冲击力，为用户带来优秀的交互体验。 jQuery是一种广泛使用的...