前两天没什么事做,就在研究着做一个菜单的功能。现在在这里总结一下:
既然是用jquery做,肯定要导入jquery的包。做一个简单的例子,记录下自己的思路。
<script type="text/javascript">
$(document).ready(function(){//相当于body里的onload方法
$(".main > a").click(function(){ //查找页面中class=main底下的a标签
$(".store").slideToggle(); //这个方法是关键,它在api中的解释是:[color=red]通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。[/color]
changeIcon($(this));
});
});
function changeIcon(mainNode){
var img = $("#img1").attr("src");//查找页面中id=img1,并把它的src属性赋给img
if(img.indexOf("gif/plus.gif")>= 0){
$("#img1").attr("src","gif/minus.gif");
}
else{
$("#img1").attr("src","gif/plus.gif");
}
}
其中的部分html代码:
<table style="border-width: 0pt;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div class="main">
<a id="storeimg" href="#"><img src="gif/plus.gif" alt="Collapse 房间" style="border-width: 0pt;" id="img1"></a>
</div>
</td>
<td style="white-space: nowrap;">
<div class="main">
<a href="#">
AAAA
</a>
</div>
</td>
</tr>
</tbody>
</table>
<div class="store" style="display:none">
<div style="display:block;">
<table style="border-width: 0pt;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><div style="width:20px;height:1px"></div>
</td>
<td><img src="gif/WebResource_002.gif" alt=""></td>
<td style="white-space: nowrap;">
<a href="#">
11111
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div style="display:block;">
<table style="border-width: 0pt;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><div style="width:20px;height:1px"></div>
</td>
<td><img src="gif/WebResource_002.gif" alt=""></td>
<td style="white-space: nowrap;">
<a href="#">
22222
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
页面代码其实并不是很重要,主要就是明白其中的思路即可,我在点击页面中的父类文字或者图标,然后把其子类文字显示出来...代码其实还是蛮简单的。呵呵。页面截图如下:
- 大小: 1.2 KB
- 大小: 2.3 KB
分享到:
相关推荐
实现效果 点击标题名如“帮助”后下拉出“帮助”的子元素 再次点击“帮助”后列表收缩回去 代码和样式很简单。希望对各位有帮助 自己回去改改便可
jquery收缩菜单点击展开收缩菜单代码
jQuery收缩菜单,通过网页前端技术实现菜单的展现方式,挺方便的一段代码,复用性高
菜单,jQuery弹性展开收缩菜单插件 jQuery弹性展开收缩菜单插件
jQuery左侧下拉三级收缩菜单,JQuery left drop-down three-level shrink menu
jquery 实现 展开的同时收缩其他的菜单
jQuery折叠下拉菜单收缩展开是一款橙色样式风格的二级菜单导航代码。
基于jquery+bootstrap的侧边栏收缩菜单,实现切换伸展收缩菜单的功能。
jquery竖直手风琴菜单收缩展示下拉菜单
jquery实现ul_li菜单展开收起效果.
jQuery弹性展开收缩菜单插件
动态收缩的横向滑动菜单,基于jquery框架,Blog用的话最合适不过了,鼠标滑过某一菜单项的时候,菜单会滑出一些,突出显示,鼠标连续滑过整个菜单,会有更炫的效果,为你的网页增加动感元素。
一款像竖向菜单栏一样的流程图,可收缩展开,点击可以下滑动的菜单列表的jQuery左侧流程图菜单列表代码。
jQuery点击展开收缩树形菜单,点击显示下拉三级菜单。
jQuery侧边栏纵向导航菜单展开收缩代码 jQuery侧边栏纵向导航菜单展开收缩代码
从网上下载的: jquery左侧 悬浮/收缩/菜单: 默认就是一个小图标; 点击展开层次结构; 嫌它碍眼可以让它缩到一边。
HTML jquery实现左侧菜单折叠,简单易学,适合新手。。。
jQuery带筛选的垂直导航菜单展开收缩代码 jQuery带筛选的垂直导航菜单展开收缩代码
jquery垂直导航菜单展开收缩垂直二级导航菜单代码