jquery之二级导航栏中mouseleave与mouseout的应用
今天无聊写了个二级导航栏，发现了一个以前根本没注意的问题，那就是mouseleave的事件。故记录在此，菜鸟飘过。
创新互联长期为1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为文安企业提供专业的成都网站设计、成都做网站、外贸网站建设，文安网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。
二级导航栏的功能无非就是鼠标至于某标题上时，显示其若干子标题，离开某标题至于另外一标题时，显示对应的子标题并隐藏其他的子标题。还有，就是鼠标离开所有的标题或子标题时，应隐藏所有的子标题。
一开始便全用mouseover和mouseout事件处理，但发现鼠标离开所有的标题或子标题时，最后一次显示出的子标题没有被隐藏。body代码如下：
[html] view plaincopy
<ul class="ul_list">
<li class="li_list">main</li>
</ul>
<ul class="ul_list">
<li class="li_list">Autobots</li>
<li class="sub_li">Optimus Prime</li>
<li class="sub_li">Bumble Bee</li>
<li class="sub_li">Ironhide</li>
<li class="sub_li">Jazz</li>
</ul>
<ul class="ul_list">
<li class="li_list">Decepticons</li>
<li class="sub_li">Megatron</li>
<li class="sub_li">Shockwave</li>
<li class="sub_li">Soundwave</li>
<li class="sub_li">Starscream</li>
</ul>
CSS如下：
[css] view plaincopy
.ul_list{
width:200px;
float:left;
text-align:center;
padding:0;
position:relative;}
.li_list{
list-style:none;
text-align:center;
background:#CCC;
height:40px;
line-height:40px;
font-size:18px;
font-family:黑体;
color:#000000;
cursor:pointer;
position:relative;}
.sub_li{
list-style:none;
text-align:center;
background:#CCC;
height:40px;
line-height:40px;
font-size:18px;
font-family:黑体;
color:#000000;
display:none;
cursor:pointer;
position:relative;}
JS如下：
[javascript] view plaincopy
$(document).ready(function(e) {
$(".li_list").mouseover(function(){
$(this).siblings(".sub_li").show("slow");
$(this).parent(".ul_list").siblings(".ul_list").children(".sub_li").hide("slow");
});
$(".ul_list").<span style="color:#ff6666;">mouseout</span>(function(){
$(this).children(".sub_li").hide("slow");
});
$(".sub_li").mouseover(function(){
$(this).css({"border-top":"1px #FFFFFF solid",
"border-bottom":"1px #FFFFFF solid"});
});
$(".sub_li").mouseout(function(){
$(this).css("border", "none");
});
});
试了一些方法也不行，后来把上述第二项的mouseout事件改为mouseleave则可以，查了资料，mouseout是不论鼠标指针离开被选元素或其子元素，都被触发；而mouseleave是只有在鼠标指针离开被选元素时，才触发。
分享文章：jquery之二级导航栏中mouseleave与mouseout的应用
标题URL：/article36/popcsg.html
成都网站建设公司_创新互联，为您提供品牌网站建设、面包屑导航、电子商务、虚拟主机、网站内链、App开发
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
