<!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的阻止事件流的方法、但是没起作用、想请教大牛们指点一下我错在什么地方勒、js事件流
$("li").click(function(){
if(window.parent.Sys.firefox){ //ie不完全支持W3c标准，ff完全支持w3c
arguments[0].stopPropagation();
}else{
event.cancelBubble=true;
}
});
跟每一个li注册阻止冒泡事件就好了， 这是我以前弄的，，你需要改下判断浏览器的判断
$('.first').click(move);
// 点二级菜单的时候阻止冒泡
$('.second').click(function(e) {
e.stopPropagation();
})
})
function move(){
$(this).find('ul').toggle('fast');
}