2011-04-19 72 views
0

我想選擇一個具有id屬性的ul。它有li標籤,在li標籤內有錨標籤。當我將鼠標移出時,我希望ul及其中的所有元素都被隱藏起來。如何使用Jquery選擇一個id和一個子標籤?

$('#switch-fighters-results-list').mouseout(function(){ 
    $(this).hide(); 
}); 

這裏是標記

<div style="display: block;" id="switch-fighters-results" class="ajax-search-results"> 
     <ul id="switch-fighters-results-list" class="ajax-search-results-list clrFx"> 
      <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class=""> 
       <a href="/fighter/scott/ferrozzo/56">Scott Ferrozzo</a> 
      </li> 
      <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class=""> 
       <a href="/fighter/scott/bessac/63">Scott Bessac</a> 
      </li> 
      <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class=""> 
       <a href="/fighter/scott/adams/191">Scott Adams</a> 
      </li> 
      <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class=""> 
       <a href="/fighter/scott/junk/362">Scott Junk</a> 
      </li> 
      <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class=""> 
       <a href="/fighter/scott/smith/376">Scott Smith</a> 
      </li> 
      <li onmouseout="removeCurrent(this);" onmouseover="addCurrent(this);" class=""> 
       <a href="/fighter/scott/baker/555">Scott Baker</a> 
      </li> 
     </ul> 
     <div id="switch-fighter-more-results"> 
      <a id="switch-fighter-more-results-link">13 more found for <span class="input-string">'scott'</span> »</a> 
     </div> 
    </div> 
+4

你可以發佈你的標記 – Galen 2011-04-19 15:25:40

回答

0

您是否嘗試過使用hover代替?我能夠使用hover其中mouseout沒有工作

Fiddle Link

$('#switch-fighters-results-list').hover(function(){},function(){ 
    $('#switch-fighters-results-list').hide(); 
}); 
0
$("#ul[id=id]").find("li").each(function(){ 
    $(this).mouseout(//do something); 
}); 
+0

這是一個黑客,因爲它不直接解決問題。 – 2011-04-19 15:42:27

+1

此外,這是您如何基於屬性進行選擇的方式,但您應該在使用id選擇時使用「#」,因爲它是標準的。例如,您可以將整個選擇器重寫爲「#myid li」,然後完成。 – 2011-04-19 15:51:30

0

從給出的信息,我會說在選擇加入「立」,如果「轉戰士,結果列表」是id的ul:

$('#switch-fighters-results-list li').mouseout(function(){ 
    $(this).hide(); 
}); 

希望這會有所幫助。

+1

我想OP會在鼠標離開時刪除整個'ul'。 – Dutchie432 2011-04-19 15:28:36

+0

正確,這也是一種破解,並沒有擺脫ul。請嘗試在ul上使用mouseleave。 – 2011-04-19 15:43:25

0

我不知道這是否有差別,但我在想,在propper的做法是:

$('#switch-fighters-results-list ul').mouseout(function(){ $(this).hide();}); 
0

如何用Jquery選擇一個ID和一個子標籤 ?

你這樣做:

$('#switch-fighters-results-list li').mouseleave(function(){ 
    $(this).hide(); 
}); 

其中 「禮」 是孩子選擇。注意空間:)

但是,mouseout可能不會做你期望的。

每當鼠標光標懸停在另一個元素上,或者不再有直接的「視線」到它觸發的元素時,mouseover和mouseout都會觸發。另一方面,mouseenter和mouseleave會在鼠標離開元素的邊框時觸發。嘗試使用mouseleave而不是mouseout。

檢查了這一點:

http://jsfiddle.net/FVPxP/3/

隱藏整個UL最簡單的方法是:

該解決方案直接解決你的問題,並完成的UL在退出它的邊界框時。

<ul id="switch-fighters-results-list"> 
    <li><a href="lego.com">Lego.com</a></li> 
    <li><a href="lego.com">Lego.com</a></li> 
    <li><a href="lego.com">Lego.com</a></li> 
    <li><a href="lego.com">Lego.com</a></li> 
    <li><a href="lego.com">Lego.com</a></li> 
</ul> 

$('#switch-fighters-results-list').mouseleave(function(){ 
    $(this).hide(); 
}); 

此外,您不必在輸入ul時再次使所有子li都可見,所以這是最直接的方法。

相關問題