jquery父元素在mouseout上隱藏着子元素

我遇到了父列表元素與孩子一起隱藏的問題，當我只想讓孩子在mouseout上隱藏時。以下是我的代碼，非常感謝任何幫助！jquery父元素在mouseout上隱藏着子元素

$(document).ready(function(){ 
    $('#home').hover(
     function() { 
      $(this).children().stop().show(); 
     }, 
     function() { 
      $(this).children().stop().hide(); 
     } 
    ); 
});

來源

2011-09-30 A_funs

你爲什麼不只是把所有的孩子一個div？簡單得多$'（'＃home_children'）。show（）;' –

我想我可能知道問題是什麼（有列表標記會有幫助）。

你隱藏所有父列表元素的兒童，這將「隱藏」的父元素，因爲它沒有任何顯示：

<div> 
    <ul id="home"> 
     <li>Test</li> 
     <li>Test</li> 
     <li>Test</li> 
    </ul> 
    <ul> 
     <li>Test</li> 
     <li>Test</li> 
     <li>Test</li> 
    </ul> 
    <ul> 
     <li>Test</li> 
     <li>Test</li> 
     <li>Test</li> 
    </ul> 
</div> 

$(document).ready(function(){ 
    $('#home').hover(
     function() { 
      $(this).children().stop().show(); 
     }, 
     function() { 
      $(this).children().stop().hide(); 
      console.log(this); 
     } 
    ); 
});

http://jsfiddle.net/sK36C/2/

使用Chrome的控制檯或Firefox中的Firebug在隱藏後查看該元素的HTML選項卡，並且您會注意到UL#home的每個LI都是display: none。在UL中沒有任何顯示，所以它出現已經消失。

這裏的另一個示範，我告訴它跳過:first兒童和隱藏休息：

<div> 
    <ul id="home"> 
     <li>This is #home text</li> 
     <li>Test</li> 
     <li>Test</li> 
     <li>Test</li> 
    </ul> 
    <ul> 
     <li>Test</li> 
     <li>Test</li> 
     <li>Test</li> 
    </ul> 
    <ul> 
     <li>Test</li> 
     <li>Test</li> 
     <li>Test</li> 
    </ul> 
</div> 

$(document).ready(function(){ 
    $('#home').hover(
     function() { 
      $(this).children(':not(:first)').stop().show(); 
     }, 
     function() { 
      $(this).children(':not(:first)').stop().hide(); 
      console.log(this); 
     } 
    ); 
});

http://jsfiddle.net/sK36C/3/

注意如何第一個元素是不是隱藏，並且UL#home仍清晰可見。

參見：http://api.jquery.com/children/

來源

2011-09-30 14:58:18

我通常總是使用'display：none'自己，但是不會'visibility：hidden'完成同樣的事情嗎？ –

這隻會給UL留下一個空白點：http://jsfiddle.net/sK36C/4/我不會想象這是OP想要的，但可能。 –

我明白這是問題所在，但問題是我該如何解決它？我不僅不想選擇第一個元素，我不想選擇剛剛打開的元素 –

更好，你可以有這樣的使用簡單CSS：

HTML：

<div> 
    <ul id="home"><p>MENU</p> 
     <li>li1</li> 
     <li>li2</li> 
     <li>li3</li> 
     <li>li4</li> 
    </ul> 
</div>

CSS：

#home:hover li{ 
    display: block; 
} 

#home li { 
display: none; 
}

Fiddle1

櫃面，如果你想使用jQuery的

嘗試當你使用jQuery嘗試做它用.toggle()

$(document).ready(function(){ 
    $('#home p').hover(
     function(e) { 
      $(this).parent().children(':not(:first)').toggle(); 
      ; 
     } 
    ); 
});

Fiddle2

來源

2013-07-17 12:02:31 Praveen

jquery父元素在mouseout上隱藏着子元素

回答

相關問題