Выпадающее меню onclick jquery скрывается в mouseout

Question

У меня есть раскрывающееся меню jngery для jng. Я пытаюсь модифицировать, чтобы сделать на клик, а не зависание, и после его нажатия. Я хотел бы использовать jquery для добавления атрибута src в iframe I в раскрывающемся списке.

Однако у меня возникли проблемы с кодированием таймаута и мышки, которые ранее обрабатывались функцией наведения. По существу, то, что он делает, - это когда я нажимаю меню, которое он открывает, но когда я пытаюсь переместить курсор в меню, которое я только расширил, оно закрывается.

Вот мой код:

 $(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; 
} 

Любая помощь очень ценится. Спасибо, Dave

Answer 1

Надеюсь, это не слишком запутанным, но без разметки, чтобы пойти с этим JS, я не могу представить рабочий пример ...

У меня было это случилось со мной. Это происходит потому, что дочерние узлы внутри узла с помощью триггера мыши вызывают стрельбу мыши. Я использовал переменную, чтобы удерживать setTimeout для задержки запуска метода hide (в вашем случае, removeClass). Я также добавлю прослушиватель мыши к детям, который очистит тайм-аут (если он существует), который предотвратит выполнение mouseout. Вам не нужно ничего больше, потому что, когда вы выходите из дочернего элемента, вы вводите родителя, и если вы выйдете из родителя, процедура скрыть будет выполняться как обычно. Задержка просто покупает вам некоторое время, чтобы проверить, не должно ли стрелять.

Если вы можете разместить разметку и css (jsfiddle), я был бы более чем счастлив прототипом.