当点击关闭时,子p会短暂的消失后又出现,造成闪烁
试试stopPropagation()方法,阻止事件冒泡
第一段代码改成这样:
$("#a").hover(function(e){ e.stopPropagation(); $("#b").toggle(); })
目测,如果需求无误的话,js逻辑是没有问题的,也就是说,问题出在你页面标签上——看你的元素嵌套,再看你的效果图,你是在#a容器内给的#b元素定位实现左右排列的吧?问题就来了,你个父元素#a绑定了hover事件,又要在它的子元素上绑定click事件,而按照事件冒泡的逻辑(你的标签页贴了事件冒泡,说明你在、也清楚问题是出在这里了),是先进入父元素,触发hover事件了。当你点击按钮的时候,你的鼠标依然是停留在#b上面,换言之,你任然触发了#a的hover事件。要解决的话,你可以试试优化一下你的页面结构,把#b提出来做#a的同级元素。或者,你试试阻止click的事件冒泡吧。
能把css贴一下嘛。。
不然呢?
把 #b
放到 #a
的外面试试?
<p id="a"></p><p id="b"><button id="bb">关闭</button></p>
<script> $(function(){ $("#a").hover(function(){ $("#b").toggle(); }) }) $("#bb").bind("click",function(){ $("#b").hide(); }) </script>
a和b用float:left;
感觉你的p的结构有问题,明明是两个平行的p,为什么要做成父子结构