Question

我有一个existsng 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），我会非常乐意将其原型化。

onclick jquery下拉菜单隐藏在mouseout上

1 个答案: