基于JQuery的一句话搞定手风琴菜单_jquery

一、Html代码

复制代码 代码如下:

<div class="MenuSubTitle AccordionCollapse">子菜单1</div>
<div>
<a href="Fld_BaseData/aa.aspx">aa管理</a><br/>
<a href="Fld_BaseData/bb.aspx">bb管理</a><br/>
</div>
<div class="MenuSubTitle AccordionCollapse">子菜单2</div>
<div>
<a href="Fld_BaseData/aa.aspx">ccc管理</a><br/>
<a href="Fld_BaseData/bb.aspx">ddd管理</a><br/>
</div>
</div>

二、Jquery代码

复制代码 代码如下:

$(function () {
$('.MenuSubTitle').click(function () {
$(this).toggleClass('AccordionCollapse').toggleClass('AccordionExpand').next().toggle('normal');
});
});

三、效果图

作者:欣静赏悦

时间: 2024-10-26 18:48:06

基于JQuery的一句话搞定手风琴菜单_jquery的相关文章

基于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

Windows XP为主盘、Ubuntu为从盘如何搞定启动菜单

以前为单盘双系统XP+UBUNTU,现在:主盘-新盘-XP 从盘-旧盘-ubuntu,双盘旧盘变为从盘了,新盘是主盘装XP.也就是现在的UBUNTU在从盘上了,如何搞定启动菜单.(安装系统时,只接其中的一块硬盘,两个硬盘可以独立运行,启动不相互依赖,http://www.aliyun.com/zixun/aggregation/19247.html">bios没有启动快捷键) 方法:设定bios,让ubuntu所在盘首先启动(交换这两个硬盘的位置应该也行),再改下menu.lst,加入下面

【高德地图API】一句话搞定webmap(一)——轻地图组件

原文:[高德地图API]一句话搞定webmap(一)--轻地图组件 摘要: 遥想当年,在APP中加入LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript-- 而如今,要制作一张地图真是越来越容易了!竟然只需要一句话,就可以打点,导航,定位,显示交通流量等. 让我们一起来轻松一下吧~     ------------------------------------华丽分割线-----------------------------------------  

基于Jquery代码实现手风琴菜单_jquery

先给大家展示效果图: 先看页面代码,列表的嵌套: <div id="menuDiv"> <ul id="menu"> <li class="parentLi"> <span>B</span> <ul class="childrenUl"> <li class="childrenLi"><span>C</sp

基于jQuery实现多层次的手风琴效果附源码_jquery

基于jQuery多层次的手风琴是一款经过美化的多级多层次手风琴特效代码.效果图如下:   在线预览    源码下载 html代码: <aside class="accordion"> <h>News</h> <div class="opened-for-codepen"> <h>News Item #</h> <div class="opened-for-codepen"

基于jquery淘宝商城快速导航菜单切换效果

这是一个非常流畅的菜单展示效果,应用在亚马逊(amazon.cn)上,当你上下移动鼠标的时候, 二级菜单会非常轻快的切换,没有任何延时,给用户如滑丝般的感觉. 这种效果借助于一款jQuery插件menu-aim,本文将结合实例讲解如何实现速度超快的菜单效果. 效果图片 实例代码  代码如下 复制代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name=&qu

jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单_jquery

先给大家看下效果图,效果图展示如下: 关键代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>首页</title> &l

基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载_jquery

基于jQuery鼠标点击水波动画竖直导航代码.这是一款基于jQuery+CSS3实现的带动画效果的竖直导航栏特效.效果图如下: 效果展示    源码下载 html代码: <div class="nav"> <ul> <li><a>网站首页</a></li> <li><a>关于我们</a></li> <li><a>产品中心</a>&l

10个基于jQuery或JavaScript的WYSIWYG 编辑器整理_jquery

在线编辑内容的时候,那些基于 JavaScript 的编辑器帮了我们大忙,这些所见即所得(WYSIWYG)编辑器,给我们提供了类似 Office?的操作体验.如今,任何网站内容管理系统(CMS)和博客系统都需要一个这样的编辑器.本文精选了5个基于 JavaScript?的编辑器,5个基于 jQuery 框架的编辑器. MarkitUp – jQuery Official Website | Demo markItUp! 它不是一个"全功能,乱用"的编辑器.相反,它是一个非常轻量级的,可