JQuery如何使li在执行click事件后,hover事件不执行

paizheshengcun 2015-01-31 05:45:46

在一个jsp中用了一个无序列表ul.
在每一个li里面加了一个div(div初始状态为隐藏)并且给li加了hover事件(背景颜色变为绿色).
当li执行click事件时div显示,但是这时当前这个li的hover事件依然执行,怎样在li执行click事件之后,当前这个li的hover事件消失,用jquery的方法该怎么写?请大神帮忙!万分感谢

...全文

908 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

IT舟 2017-09-29

打赏
举报

$(function(){ $("ul li").hover(function(){ $(this).addClass('bg') },function(){ $(this).removeClass('bg'); }) $("ul li").click(function() { $(this).removeClass('bg').unbind('hover'); $(this).find("div").slideDown(); }); }) u010036886 闪闪放光芒 T4 这位的代码很有益处啊只是jQuery 的hover函数没有解绑 $(this).removeClass('bg').unbind('mouseenter').unbind('mouseleave'); 这样才可以解绑参考jQuery官方文档

paizheshengcun 2015-01-31

打赏
举报

感谢二位!问题解决!

天际的海浪 2015-01-31

打赏
举报

可以在当div显示时同时对li设置个优先级高的css样式class。这样在hover事件设置的优先级较低的css样式class就无效了。你可以看看css样式优先级之类的资料也可以反过来想在hover事件中判断div是否显示来决定改不改变css样式

闪闪放光芒 2015-01-31

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
div{ width:200px; height:200px; background:#9CF; display:none;}
.bg{ background:#33FF00}
</style>
<script src="http://cloud.xing-xing.com/jquery.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
	$("ul li").hover(function(){
		$(this).addClass('bg')
	},function(){
		$(this).removeClass('bg');
	})
	$("ul li").click(function() {
        $(this).removeClass('bg').unbind('hover');
		$(this).find("div").slideDown();
    });

})
</script>
</head>
<body >
<ul>
	<li>111111<div></div></li>
    <br />
    <li>222222<div></div></li>
    <br />
    <li>333333<div></div></li>
    <br />
    <li>444444<div></div></li>
    <br />
    <li>555555<div></div></li>
</ul>
</body>
</html>