jquery 最简单的属性菜单

1.0 创建 <UL> 菜单树！ 并影藏 子选项！
2.0 加入！


代码如下:

$("li:has(ul)").click(
function (){$(this).children("ul").css("display")=='none'?$(this).children("ul").show("slow"):$(this).children("ul").hide("slow");
}
);

3.0 你完成了！

赞 (0)

相关推荐

  • jquery 最简单的属性菜单

    1.0 创建 <UL> 菜单树! 并影藏 子选项! 2.0 加入! 复制代码 代码如下: $("li:has(ul)").click( function (){$(this).children("ul").css("display")=='none'?$(this).children("ul").show("slow"):$(this).children("ul").hide

  • 基于jQuery实现简单的折叠菜单效果

    基于jQuery实现简单的折叠菜单效果

    本文实例讲述了JQuery实现简单的折叠菜单效果代码.分享给大家供大家参考.具体如下: 运行效果截图如下: Html代码如下: <div class="box"> <p>菜单一</p> <ul> <li><a>1111</a></li> <li><a>1111</a></li> <li><a>1111</a>

  • CSS+jQuery实现简单的折叠菜单

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title>折叠菜单</title> <style> body{ background:grey; font-family:Microsoft Yahei; color:white; } .types a{ text-decoration:none; color:white; } .types ul{ display:n

  • jquery实现简单Tab切换菜单效果

    本文实例为大家分享了jquery Tab切换菜单的实现代码,供大家参考,具体内容如下 实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li class="active"><a href="#tab1">导航菜单</a></li> <li><a href="

  • 基于JQuery的简单实现折叠菜单代码

    菜单为二级,初始化时为折叠效果,单击大项标题时展开,显示二级列表. HTML代码如下: 复制代码 代码如下: <body> <div class="mainleftFAQ"> <div class="category"> <img src="images/admin.gif" width="215" height="66" /> </div> &l

  • jquery实现简单下拉菜单效果

    jquery实现简单下拉菜单效果

    本文用简单的几行jquery代码实现简单的下拉菜单效果,供大家参考,具体内容如下 看效果 html <ul>     <li>       主题市场       <ul>         <li>           运动派           <ul>             <li>三级菜单a</li>             <li>三级菜单b</li>             <li&

  • jQuery实现简单漂亮的Nav导航菜单效果

    jQuery实现简单漂亮的Nav导航菜单效果

    本文实例讲述了jQuery实现简单漂亮的Nav导航菜单效果.分享给大家供大家参考,具体如下: 自己写的一个简单的导航菜单,先看效果: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项. 页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一个 div 则是底部的蓝条,需要给第一项和最后一项设置不同的 class ,样式需要用到: <div id="nav"> <div class="navItem ind

  • jquery实现简单的二级导航下拉菜单效果

    jquery实现简单的二级导航下拉菜单效果

    本文实例讲述了jquery实现简单的二级导航下拉菜单效果.分享给大家供大家参考.具体如下: jQuery代码实现的二级导航菜单效果,非常简洁,喜欢简洁风格的朋友您可以下载哦.菜单最多支持两级,CSS的配合也是挺重要的,不多说了,要代码的就直接复制吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/ 具体代码如下: <title>jquery二级导航菜单</title> <styl

  • 基于jQuery的简单的列表导航菜单

    基于jQuery的简单的列表导航菜单

    下面是我做的一个简单的导航菜单,因为是新手,难免有什么不对的地方,希望大家拍砖! 好了 开始进入正题吧: 1.首先定义CSS样式表: 复制代码 代码如下: <style type="text/css"> body{font-size:13px} ul,li{list-style-type:none;padding:0px;margin:0px} .menu{width:190px;border:solid 1px #E5D1A1;background-color:#FFFD

  • jquery实现最简单的滑动菜单效果代码

    jquery实现最简单的滑动菜单效果代码

    本文实例讲述了jquery实现最简单的滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/

随机推荐