Onclick jquery下拉菜单隐藏在mouseout上

Question

我有一个现有的 jquery 下拉菜单，我正在尝试对其进行改造以在单击而不是悬停时进行，一旦单击它，我想使用 jquery 将 src 属性添加到我在下拉列表中的 iframe 中。

但是，我在编码之前由悬停功能处理的超时和鼠标悬停时遇到了问题。本质上，它所做的是当我单击菜单时它会打开它，但是当我尝试将光标移动到我刚刚展开的菜单时它会关闭。

这是我的代码：

     $(document).ready(function(){
    $("#mylinksdd li").hover(
          function(){ $("ul", this).fadeIn("fast"); }
     );
     if (document.all) {
         $("#mylinksdd li").hoverClass ("sfHover");
     }
  });        
   $.fn.hoverClass = function(c) {
       return this.each(function(){
         $(this).click( 
             function() { $(this).addClass(c);  }
         );
   $(this).mouseout(
    function() { $(this).removeClass(c); }
   );
       });
    };

这是我的 HTML：

<ul id="mylinksdd" class="mylinksdd">
        <li>
            <SPAN style="font-weight:bold; cursor:default">Quick Links</SPAN>
            <ul>
            <li><iframe id="quicklinksframe" frameborder="0" class="autoHeight" width="250" src=""></iframe></li>
            </ul>
        </li>
</ul>

我的 CSS：

/* mylinksdd */
.mylinksdd, .mylinksdd ul { 

    list-style: none;
    margin: 0;
    padding: 0;
}

.mylinksdd {
  z-index: 100;
  position: relative;
}
.mylinksdd li {

  float: left;
  margin: 0;
  padding: 0;
  position: relative;
}
.mylinksdd li a, .mylinksdd li a:link, .mylinksdd li a:active, .mylinksdd li a:visited {
color: #1a508e;
  display: block;
  padding: 0 0px;
}

.mylinksdd ul {
  background: #eee;
  border: 1px solid black;
  border-top: 6px solid #3c1e4c;
  list-style: none;
  margin: 0;
  width: 75px;
  position: absolute;
  top: -999em;
  left: -20px;
  right: -20px;
  padding: 5px;
  color: #1a508e;
}
.mylinksdd li:hover ul,
.mylinksdd li.sfHover ul {
  top: 16px;
}
.mylinksdd ul li {
color: #1a508e;
  border: 0;
  float: none;
}

非常感谢任何帮助。 谢谢， 戴夫

Answer 1

希望这不会太混乱，但如果没有标记来配合这个 JS，我真的无法提供工作示例...

我遇到过这种情况。发生这种情况是因为带有 mouseout 触发器的节点内的子节点导致 mouseout 触发。我使用了一个变量来保存一个 setTimeout 来延迟触发 hide 方法（在你的例子中是 removeClass）。我还将向子项添加一个 mouseover 侦听器，以清除超时（如果存在），这将阻止 mouseout 执行。您将不再需要任何东西，因为当您退出孩子时，您会进入父母，如果您随后退出父母，则隐藏例程将照常执行。延迟只是为您争取一些时间来检查鼠标是否应该触发。

如果您可以发布标记和 css (jsfiddle)，我会非常乐意将其原型化。