顯示隱藏的div

Question

HTML：

我有每個L1的UL列表counstructed這樣的：

<li class="A">list-item 
    <div>1</div> 
    <div class="B">2 
     <div class="C">3</div> 
    </div> 

    </li> 

其中DIV C有CSS屬性顯示：無; 我寫了這個JS：

$(".A").hover(function() { 
    $(".C").toggle(); 
    }); 

，顯示李懸停隱藏層，但我想JS只在活躍的李項工作。 因此，當我懸停李項目它只顯示該列表項隱藏div。

有什麼建議嗎？我是新的js，所以任何幫助將不勝感激thnx！

Answer 1

使用context可將查找縮小到所需元素的子元素。

$(".A").hover(function() { 
    $(".C", this).toggle(); 
}); 

Answer 2

嘗試這樣的事情，它會發現內this類C（這將是該元件徘徊）

$(".A").hover(function() { 
    $(this).find(".C").toggle(); 
}); 

Answer 3

使用hover()，hover功能的正確格式爲：

$(".A").hover(
    function() { 
    // A function to execute when the mouse pointer enters the element. 
    $(this).find(".C").show(); 
    }, 
    function() { 
    // A function to execute when the mouse pointer leaves the element. 
    $(this).find(".C").hide(); 
    } 
);