3

我的 jQuery 代码：

$(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 代码：我在 smarty 模板上写，但装备看起来像这样：

<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 出现。这种情况正在发生，但我也希望“第三类”ul 在我将鼠标悬停在它上面时保持可见。我尝试了一切，但我不知道是什么问题...如果有人可以提供帮助将不胜感激...谢谢！

4

1 回答 1

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>​
于 2012-11-04T01:26:13.183 回答