如何淡入/淡出菜單時懸停在父母上的兒童

我試圖獲得一個基本的fadeIn兒童ul#access ul li:hover > ul懸停後，然後fadeOut徘徊。我有這樣的代碼，但它不工作：如何淡入/淡出菜單時懸停在父母上的兒童

jQuery(document).ready(function(){ 
    jQuery("#access ul li").hover(function() { 
      jQuery(this).children("ul").fadeIn(500); 
     }, function() { 
      jQuery(this).children("ul").fadeOut(500); 
    }); 
});

下面的代碼工作樣的，但越野車，因爲我沒有影響只是this孩子：

jQuery(document).ready(function(){ 
    jQuery("#access ul li").hover(function() { 
      jQuery(this).children("ul").fadeIn(500).animate({top: '-=10'}, 500, function() { }); 
     }, function() { 
      jQuery("#access ul li > ul").fadeOut(500).animate({top: '+=10'}, 500, function() { }); 
    }); 
});

沒有人有任何想法爲什麼頂級版本不起作用？

這裏的HTML：

<nav id="access" role="navigation"> 
    <div class="menu"><ul> 
     <li><a href="#" title="Home">Home</a></li> 
     <li><a href="#" title="Sample Page">Sample Page</a> 
      <ul class='children'> 
       <li><a href="#"; title="About Me">About Me</a></li> 
       <li><a href="#" title="Another Page">Another Page</a></li> 
      </ul> 
     </li> 
    </ul></div> 
</nav>

來源

2011-12-21 Sam

會有所幫助。 – Dutchie432 2011-12-21 18:32:03

這聽起來很奇怪，這是對我工作的罰款：

http://jsfiddle.net/tAUw4/

<div id="access"> 
    <ul> 
     <li> 
      Foo 
      <ul> 
       <li>Foo - 1</li> 
       <li>Foo - 2</li> 
       <li>Foo - 3</li> 
      </ul> 
     </li> 
     <li> 
      Bar 
      <ul> 
       <li>Bar - 1</li> 
       <li>Bar - 2</li> 
       <li>Bar - 3</li> 
      </ul> 
     </li> 
     <li> 
      Baz 
      <ul> 
       <li>Baz - 1</li> 
       <li>Baz - 2</li> 
       <li>Baz - 3</li> 
      </ul> 
     </li> 
    </ul> 
</div> 

$(function() { 
    $('#access li').hover(function() { 
     $(this).children('ul').fadeIn(); 
    }, function() { 
     $(this).children('ul').fadeOut(); 
    }); 
}); 

ul ul { 
    display: none; 
}

來源

2011-12-21 18:49:16 powerbuoy

看起來這幾乎是我的，但它不適合我。另外，如果它有幫助，如果我用'animate（）'替換'fadeIn（）'，animate與'this'兒童一起工作。我很難過。 – Sam 2011-12-21 19:51:41

嗯..你可以創建一個複製你的問題的JSFiddle嗎？ – powerbuoy 2011-12-22 02:41:15

沒有任何HTML它只是將是猜測，但我相信問題是元素在覆蓋懸停事件處理程序所附帶的原始元素或其他類似物時被淡化。

也許這樣的事情會工作：

$(function() { 
    $("#access ul li").mouseenter(function() { 
     $('ul', this).fadeIn(500); 
    }); 
    $("#access ul li > ul:visible").mouseleave(function() { 
     $(this).fadeOut(500); 

    }); 
});

如果某些#access ul li ul元素都默認爲可見，你可以嘗試存儲從的mouseenter的this元素的變量或使用jQuery的數據，並使用在mouseleave函數來定位正確的元素。

最好的選擇當然是將你的html和css結構化，使其以常規方式工作。包括HTML在內的

來源

2011-12-21 18:56:01 adeneo

如何淡入/淡出菜單時懸停在父母上的兒童

回答

相關問題