`
liujiawinds
  • 浏览: 135781 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

简单jquery的ul导航

 
阅读更多
<html>
  <head>
    <title>test nav</title>
  </head>
  <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  <script type="text/javascript" >
		$(document).ready(function(){
			$("ul").click(function(e){
				var $target=$(e.target);
				if($target.next("ul").is(":hidden")){
				$target.next("ul").show();
				}
			 else{
				$target.next("ul").hide();
			}
			});
		
		});

  </script>
  <body>
	<ul>
		<li>1</li>
		<ul>
			<li>11</li>
			<li>12</li>
			<li>13</li>
		</ul>
		<li>2</li>
		<ul>
			<li>21</li>
			<li>22</li>
			<li>23</li>
		</ul>
		<li>3</li>
		<ul>
			<li>31</li>
			<li>32</li>
			<li>33</li>
		</ul>
	</ul>
  </body>
</html>

 

 

代码已经贴上。如有疑问可以留言。

仅供菜鸟分享,大神勿喷。

0
0
分享到:
评论

相关推荐

    jquery 浮动导航菜单

    jQuery 是一个流行的 JavaScript 库,提供了丰富的功能和简洁的语法,使得创建动态交互的浮动导航菜单变得非常简单。本文将深入探讨如何利用 jQuery 实现一个高效且响应式的浮动导航菜单。 首先,我们需要了解浮动...

    简洁的JQuery竖导航菜单

    【简洁的JQuery竖导航菜单】是一种常见的网页交互设计元素,它使用JavaScript库JQuery来实现,主要用于提高用户在网站中的导航体验。JQuery因其简洁的API和强大的功能,成为了前端开发人员的首选库,尤其在处理DOM...

    jquery 悬浮 导航栏

    "jQuery 悬浮导航栏"是一种常见的网页交互效果,当用户滚动页面时,导航栏会固定在屏幕顶部,始终保持可见,提供便捷的导航。在本篇文章中,我们将深入探讨如何使用 jQuery 实现这一功能,以及其背后的原理和技术...

    JQuery头部导航栏

    通常,一个简单的导航栏可能包含多个链接元素(`&lt;a&gt;`标签)嵌套在无序列表(`&lt;ul&gt;`和`&lt;li&gt;`标签)中。例如: ```html &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;关于我们&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#...

    jQuery mobile多种样式的导航

    jQuery Mobile的基础导航栏(Navbar)是一种简单而有效的布局元素,可以包含一系列链接按钮。基础的导航栏可以通过以下HTML代码创建: ```html &lt;ul&gt; &lt;li&gt;&lt;a href="#" data-icon="home"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a ...

    jquery多级导航

    标题 "jQuery多级导航" 涉及到的是在网页设计中使用JavaScript库jQuery实现的交互式多级导航菜单。这种导航菜单允许用户方便地访问网站的多层次结构,提升用户体验。接下来,我们将深入探讨jQuery多级导航的实现原理...

    jQuery后台左侧三级导航菜单

    在构建后台导航菜单时,jQuery提供了丰富的API和功能,使得动态交互变得简单易行。 三级导航菜单通常包括一级菜单、二级菜单和三级菜单,它们按照层次结构展开。在后台设计中,左侧布局通常用于放置导航菜单,因为...

    JQuery横向纵向导航菜单

    在构建导航菜单时,jQuery的强大功能体现在其简单易用的API和丰富的插件生态。 1. **HTML结构**: - 一个有效的横向/纵向菜单通常由`&lt;ul&gt;`元素和`&lt;li&gt;`元素组成,分别代表菜单列表和菜单项。例如: ```html ...

    jQuery 苹果官网导航栏效果代码

    通常,一个简单的导航栏由`&lt;nav&gt;`元素包裹,包含一系列`&lt;ul&gt;`列表项,每个列表项是一个`&lt;li&gt;`,其中嵌套着链接`&lt;a&gt;`。例如: ```html &lt;ul class="navbar"&gt; &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;...

    jquery展开收起导航

    "jQuery 展开收起导航"是一种常见的交互设计技术,它增强了用户体验,使得长的左侧导航菜单可以在需要时展开,不需要时收起,节省了屏幕空间。在本文中,我们将深入探讨这种导航方式的工作原理、实现方法以及相关的 ...

    自制jQuery导航栏

    【自制jQuery导航栏】是一个关于创建自定义垂直导航菜单的项目,主要利用JavaScript库jQuery来实现功能。在网页设计中,导航栏是不可或缺的一部分,它帮助用户轻松地浏览网站的不同部分。这个项目专注于构建一个两层...

    jQuery原生半透明导航下拉效果

    在本文中,我们将深入探讨如何使用jQuery实现一个具有半透明特性的原生导航下拉效果。这个效果在现代网页设计中非常流行,因为它为用户提供了一种直观且吸引人的交互方式。我们将从基础概念开始,逐步讲解如何配置...

    html+jquery+CSS实现最简单的右侧导航栏效果

    本教程将详细讲解如何使用HTML、CSS和jQuery来实现一个最简单的右侧导航栏效果。这个导航栏将具有响应式设计,能在不同设备上良好展示,并能通过点击事件动态显示和隐藏。 首先,我们从HTML结构开始。一个基础的...

    jQuery多级无限级导航下拉菜单.zip

    在网页设计中,导航菜单是用户与网站...总的来说,jQuery提供了强大的工具,使得创建多级无限级导航下拉菜单变得相对简单,同时保持了良好的用户体验。通过不断学习和实践,你可以创建出更加复杂和个性化的导航菜单。

    jquery+css3 导航栏

    下面是一个简单的jQuery代码示例,实现下拉菜单的显示与隐藏: ```javascript $(document).ready(function() { $('.dropdown').on('mouseenter', function() { $(this).find('.dropdown-menu').stop().slideDown()...

    Jquery网站导航级联菜单(Jquery1.9.1)

    **jQuery 网站导航级联菜单详解** 在网页设计中,导航菜单是至关重要的元素,它帮助用户轻松地在网站各个部分之间穿梭。而级联(或下拉)菜单则进一步增强了用户体验,特别是对于拥有多个层级内容的大型网站。在本...

    横向滚动jQuery导航菜单

    【横向滚动jQuery导航菜单】是一种常见的网页交互设计,它允许用户在水平方向上浏览菜单项,为网站增加了一种现代且动态的用户体验。在本文中,我们将深入探讨如何使用jQuery实现这种效果,以及相关的HTML、CSS和...

    jQuery左侧导航分类

    在网页设计中,jQuery是一种广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,使得动态交互变得更加简单。"jQuery左侧导航分类"是一个常见的网页布局模式,尤其在内容丰富的网站中非常常见,它能够帮助...

    jQuery自适应横排下拉导航代码.zip

    在创建自适应横排下拉导航时,jQuery提供了便利的API和方法,使得动态效果的实现变得简单易行。例如,`slideUp()`和`slideDown()`函数可用于控制下拉菜单的隐藏和显示,而`.hover()`事件监听器则可实现鼠标悬停时的...

    Jquery网站导航级联菜单(Jquery1.7.2)

    `jQuery` 是一款广泛使用的 JavaScript 库,其强大的功能使得创建动态、交互性强的导航菜单变得简单易行。本教程将深入讲解如何使用 `jQuery 1.7.2` 实现横排和竖排的下拉级联菜单。 1. **jQuery 基础** 在深入...

Global site tag (gtag.js) - Google Analytics