<ul> <li class="red"><a href="javascript:void(0)">项目一</a></li> <li class="green"><a href="javascript:void(0)">项目二</a></li> <li class="green"><a href="javascript:void(0)">项目三</a></li> <li class="green"><a href="javascript:void(0)">项目四</a></li> </ul> $(function () { $.each($("li"), function (i, o) { $(this).children("a").click(function () { allhide(); $(this).parent("li").attr("class", "red"); }); if ($(this).attr("class") != "red") { $(this).mouseenter(function () { $(this).attr("class", "red"); }); $(this).mouseleave(function () { $(this).attr("class", "green"); }); } }); }); function allhide() { $.each($("li"), function (i, o) { $(this).attr("class", "green"); }); } <style type="text/css"> li { width: 80px; list-style-type: none; } .red { background-color: Red; } .green { background-color: Green; } </style>
$.each($("li"), function (i, o) { $(this).children("a").click(function (e) { $("li").attr("class", "green");//不用另起函数 $(this).parent("li").attr("class", "red"); e.stopPropagation(); }); if ($(this).attr("class") != "red") { $(this).mouseenter(function (e) { $(this).attr("class", "red"); e.stopPropagation(); }); $(this).mouseleave(function (e) { $(this).attr("class", "green"); e.stopPropagation(); }); } });
好像不起作用,还是鼠标点击时改变这个li的样式,但是鼠标移开时就去掉了这个样式了,不知道是什么原因
<script type="text/javascript"> //这里不存在冒泡呀 $(function () { $("li").each(function(){ $(this).find("a").click(function(){ $("li").attr("class","green"); $(this).parent().attr("class","red"); }) }); }); </script>
哦,不是冒泡吗??那我这里的点击后移开鼠标样式就改变了啊
$(this).children("a").click(function () { allhide(); $(this).parent("li").attr("class", "red"); });
感觉是代码的问题,你的$(this)指针变过了下面还能用吗?
你用变量记录一下var that = $(this)试试
if ($(this).attr("class") != "red") { $(this).mouseenter(function () { $(this).attr("class", "red"); }); $(this).mouseleave(function () { $(this).attr("class", "green"); }); } });
恩,我自己也搞明白了,鼠标点击事件时,颜色为红色的样式已经变化了,而我没有把变化的指针保存下来,以下是我修改后的代码:
nodeli = $("ul li:first"); $.each($("li"), function (i, o) { $(this).click(function () { allhide(); $(this).attr("class", "red"); nodeli = $(this); //alert(nodeli.html()); }); $(this).mouseover(function () { $(this).attr("class", "red"); }); $(this).mouseout(function () { $(this).attr("class", "green"); $(nodeli).attr("class", "red"); // alert(nodeli.html()); }); });
以上是jquery阻止click与mouseover以及mouseout冒泡问题解决的详细内容。更多信息请关注PHP中文网其他相关文章!