Question

MY jQuery CODE：

$(function()
{
    $(".third-categories").hide();  
});

$(function()
{
    $(".second-categories").hover(function() {
    $(this).next(".third-categories").show("slow");},
    function(){
    $(this).next(".third-categories").hide("slow");}
    );

});
$(function()
{
    $(".third-categories").mouseover(function(){(".third-categories").show("slow");});  
});

我的HTML代码：我正在写一个聪明的模板，但服装看起来像这样：

<ul class="second-categories">
<ul class="second-categories">
<ul class="third-categories" style="display: none;">
  <li style="padding-left: 13px;">
</ul>
<ul class="second-categories">
<ul class="second-categories">
<ul class="third-categories" style="display: none;">
  <li style="padding-left: 13px;">
  <li style="padding-left: 13px;">
</ul>
<ul class="second-categories">
</html>

当我鼠标悬停在“第二类”时，我想要出现“第三类”ul。这种情况正在发生但我还希望当我将鼠标放在它上面时，“第三类”ul保持可见。我尝试了一切，我不知道问题是什么......如果有人能提供帮助将会受到赞赏...谢谢！

Answer 1

这是您要找的内容：工作演示 http://jsfiddle.net/8gdxG/

你的HTML看起来也有点不对劲。另请注意，一旦满足需要，您不需要多次添加文档。

下面的其余代码将有助于:)

JQ代码

$('.second-categories').mouseleave(function() {

        $(this).find('li ul.third-categories').each(function () {
            $(this).stop().slideUp('slow');
        });
    });

    $("ul li").mouseenter(function() { $(this).children('ul').stop().slideDown('slow'); });

HTML代码

<ul class="second-categories">
    <li>Hulk
      <ul class="third-categories">
          <li>child1</li>
         <li>child2</li>
      </ul>
     </li>    
    <li>Ironman
     <ul class="third-categories">
          <li>child</li>
         <li>child</li>
      </ul> 
    </li>
    <li>Thor
      <ul class="third-categories">
          <li>child</li>
      </ul>              
    </li>
</ul>

jquery悬停在mouseover上我的子类别消失了

1 个答案: