在李元素中選擇嵌套div

用戶將鼠標懸停在菜單項上，然後我想向用戶顯示子菜單。我想使用Jquery來顯示和隱藏sub-nav-conatiner div。唯一的麻煩是我的jQuery顯示並隱藏所有子菜單 - 我想只顯示一個。所以我需要選擇當前懸停的嵌套div，希望是有道理的。我曾嘗試各種沒有運氣:(在李元素中選擇嵌套div

 <ul> 

      <li><a href="/classifieds/farming"> 
      Agriculture & Farming</a> 
      </li> 

      <li class="sub-menu-header"><a href="#">Test Header </a> 
        <div class="sub-nav-container"> 
        <div class="sub-panel"> 
         <ul> 
          <li><a href="">Electrical Goods</a></li> 
          <li><a href="">Electrical Goods</a></li> 
         </ul> 
         <div class="clr"></div> 
        </div> 
        </div> 
       </li> 

     ... 
</ul>

jQuery的

$(document).ready(function() { 
      $('.sub-nav-container').css('display', 'none !important;'); 
     }); 
     $('.sub-menu-header').mouseover(function() { 
      ????????? 
     }); 
     $('.sub-menu-header').mouseleave(function() { 
      $('.sub-nav-container').css('display', 'none !important;'); 
     });

來源

2011-05-24 SimonGates

你知道，這是可以通過CSS只能用僞'實現：爲所有現代瀏覽器hover'？（當然不是IE6） – DanielB 2011-05-24 15:41:31

是的 - 我已經爲javascript關閉的人實現了這一點。我想通過添加一個延遲來改善它，所以當用戶將鼠標移出子菜單時，菜單不會立即消失。我只需要知道如何選擇元素。 – SimonGates 2011-05-24 15:45:45

使用this

$('.sub-menu-header').mouseover(function() { 
    $(this).find('div.sub-nav-container').show(); 
});

但是，您可以簡化代碼， - 無需單獨mouseover和mouseleave只需使用.hover()並帶一個函數參數：

$('.sub-menu-header').hover(function() { 
    $(this).find('div.sub-nav-container').toggle(); 
});

來源

2011-05-24 15:41:39

完美的感謝 - 我知道這將是「這個」 – SimonGates 2011-05-24 15:49:26

$('.sub-menu-header').mouseover(function() { 
$(this).children(".sub-nav-container").show(); 
});

來源

2011-05-24 15:42:19 Treemonkey

$('.sub-menu-header').mouseover(function() { 
    $('.sub-nav-container', this).show(); 
});

來源

2011-05-24 15:42:51

在李元素中選擇嵌套div

回答

相關問題