jquery实现卷帘效果问题

shuzhongqq1 2011-11-20 11:19:20

这是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链接后又会卷上去，怎样避免这种情况啊？

...全文

248 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

默默不得鱼 2011-11-21

打赏
举报

slideToggle() to slideDown()

风一样的大叔 2011-11-21

打赏
举报

有反应了,没引用jquery文件

风一样的大叔 2011-11-21

打赏
举报

[Quote=引用 1 楼 hetengfei_ 的回复:]
我给你一个劲招。
你慢慢看明了就有所收获的！！！

HTML code

<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
<style type="text/css">
body
{
background: #ede;
}
……
[/Quote]

木有反应

hetengfei_ 2011-11-20

打赏
举报

我给你一个劲招。
你慢慢看明了就有所收获的！！！



<!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>