javascript阻止事件流问题、

黑白丶Love 2013-05-14 10:38:04



<!DOCTYPE HTML>

<html>

<head>

<meta charset='utf-8'>

<style type="text/css">

* { padding: 0; margin: 0; }

ul,li { list-style: none; }

a { text-decoration: none; }

/* 列表样式 */

aside { display: block; width: 240px; height: auto; position: absolute; left: 20%; top: 20%; border: 1px solid #EAF3F0; border-top: 3px solid #C0DDE3; }

.first { width: 240px; height: auto; border-top: 1px solid #EAF3F0; cursor: pointer; }

.first .title { width: 240px; height: 30px; line-height: 29px; }

.first span { float: left; display: block; width: 8px; height: 6px; margin: 0 10px; margin-top: 11px; border: 1px solid #C0DDE3; border-top: 3px solid #C0DDE3; }

.first a { color: #39818E; font-size: 12px; font-weight: bold; }

.first ul { display: none; }

.second { width: 240px; height: 29px; border-top: 1px solid #EAF3F0; line-height: 28px; }

.second span { margin-left: 25px;}

</style>

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

<script type="text/javascript">

$(function () {

	$('.first').click(move);

})

var k = false; // 开关  true-显示二级菜单 false-不显示二级菜单

function move(e){

	var e = e || window.event;

	e.stopPropagation();

	if(k){

		$(this).children('ul').hide('fast',function(){k=false;});

	}else{

		$(this).children('ul').show('fast',function(){k=true;});

	}

	return false;

}

</script>

</head>

<body onselectstart='return false;'>

<aside>

	<ul>

		<li class='first'>

			<section class='title'><span></span><a href="#">一级菜单</a></section>

			<ul>

				<li class='second'>

					<section class='title'><span></span><a href="#">二级菜单</a></section>

				</li>

				<li class='second'>

					<section class='title'><span></span><a href="#">二级菜单</a></section>

				</li>

				<li class='second'>

					<section class='title'><span></span><a href="#">二级菜单</a></section>

				</li>

			</ul>

		</li>



		<li class='first'>

			<section class='title'><span></span><a href="#">一级菜单</a></section>

			<ul>

				<li class='second'>

					<section class='title'><span></span><a href="#">二级菜单</a></section>

				</li>

				<li class='second'>

					<section class='title'><span></span><a href="#">二级菜单</a></section>

				</li>

				<li class='second'>

					<section class='title'><span></span><a href="#">二级菜单</a></section>

				</li>

			</ul>

		</li>



		<li class='first'>

			<section class='title'><span></span><a href="#">一级菜单</a></section>

			<ul>

				<li class='second'>

					<section class='title'><span></span><a href="#">二级菜单</a></section>

				</li>

				<li class='second'>

					<section class='title'><span></span><a href="#">二级菜单</a></section>

				</li>

				<li class='second'>

					<section class='title'><span></span><a href="#">二级菜单</a></section>

				</li>

			</ul>

		</li>



	</ul>

</aside>

</body>

</html>

在上面有个事件流、点击一级导航内的二级导航也会执行收缩运动、
我查了jquery的阻止事件流的方法、但是没起作用、想请教大牛们指点一下我错在什么地方勒、

...全文

119 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

夜空中苦逼的程序员 2013-05-14

打赏
举报


		$("li").click(function(){
			if(window.parent.Sys.firefox){   //ie不完全支持W3c标准，ff完全支持w3c
				arguments[0].stopPropagation();
			}else{
				event.cancelBubble=true;
			}
		});

跟每一个li注册阻止冒泡事件就好了，这是我以前弄的，，你需要改下判断浏览器的判断

黑白丶Love 2013-05-14

打赏
举报

顶一个、等大牛们帮忙看一眼、

猿敲月下码 2013-05-14

打赏
举报

$(function () {
	$('.first').click(move);
	// 点二级菜单的时候阻止冒泡
	$('.second').click(function(e) {
		e.stopPropagation();
	})
})
function move(){
	$(this).find('ul').toggle('fast');	
}