Jquery实现菜单的收缩

前两天没什么事做，就在研究着做一个菜单的功能。现在在这里总结一下：
既然是用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>

页面代码其实并不是很重要，主要就是明白其中的思路即可，我在点击页面中的父类文字或者图标，然后把其子类文字显示出来...代码其实还是蛮简单的。呵呵。页面截图如下：
[img]http://dl.iteye.com/upload/attachment/532085/495b1c3b-ee36-3aa7-ab5c-e2da73d4124c.jpg[/img]


[img]http://dl.iteye.com/upload/attachment/532087/cad68147-13a6-30c7-9657-464f07e0f85d.jpg[/img]