jquery实现卷帘效果问题

这是html代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../scripts/slidetoggle.js" type="text/javascript"></script>
<link href="../styles/slidetoggle.css" rel="stylesheet" type="text/css">
<title>无标题文档</title>
</head><body>
<ul>
   <li class="main">文章管理
      <ul>
          <li><a href="#" target="rightFrame">文章分类</a></li>
          <li><a href="#" target="rightFrame">添加文章</a></li>
          <li><a href="#" target="rightFrame">修改文章</a></li>
          <li><a href="#" target="rightFrame">删除文章</a></li>
          
      </ul>
   </li>   
   <li class="main">图片管理
      <ul>
          <li><a href="#" target="rightFrame">上传图片</a></li>
          <li><a href="#" target="rightFrame">删除图片</a></li>
          <li><a href="#" target="rightFrame">添加相册</a></li>
      </ul>
   </li>         
</ul>     
</body>
</html>js代码
$(document).ready(function(){
      $(".main").click(function(){
  var node =$(this).children("ul");
  node.slideToggle(); 
  })
    
});body{
background:#ede;
}
ul li{
display:block;
font-weight:bold;
font-family: "微软雅黑";
font-size:16px;
line-height:25px;
cursor:pointer;
}

.main ul{
display:none;
}
a{

font-weight:normal;
text-decoration:none; }
运行之后展开后，点击下面的li链接后又会卷上去，怎样避免这种情况啊？

解决方案 »

  1.   

    我给你一个劲招。
    你慢慢看明了就有所收获的！！！<!DOCTYPE HTML>
    <html>
    <head>
    <title>title</title>
    <style type="text/css">
    body
    {
    background: #ede;
    }
    ul li
    {
    display: block;
    font-weight: bold;
    font-family: "微软雅黑";
    font-size: 16px;
    line-height: 25px;
    cursor: pointer;
    }
    .main ul
    {
    display: none;
    }
    a
    {
    font-weight: normal;
    text-decoration: none;
    }
    </style>
    <!-- 在此引入你的jQuery 文件
    <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="JS/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>-->
    <script type="text/javascript">
    $(document).ready(function() {
    $("#mainDiv")[0].onclick = getEventSrc;
    });
    function getEventSrc(ev) {
    ev = ev || window.event;  // 事件
    var target = ev.target || ev.srcElement; // 获得事件源 的html
    $(target).children().slideToggle();
    }
    </script>

    </head>
    <body>
    <div id="mainDiv">
    <ul>
    <li class="main">文章管理
    <ul>
    <li><a href="#" target="rightFrame">文章分类</a></li>
    <li><a href="#" target="rightFrame">添加文章</a></li>
    <li><a href="#" target="rightFrame">修改文章</a></li>
    <li><a href="#" target="rightFrame">删除文章</a></li>
    </ul>
    </li>
    <li class="main">图片管理
    <ul>
    <li><a href="#" target="rightFrame">上传图片</a></li>
    <li><a href="#" target="rightFrame">删除图片</a></li>
    <li><a href="#" target="rightFrame">添加相册</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </body>
    </html>
      

  2.   


    slideToggle() to slideDown()