jquery隱藏元素的實例

Question

我只想切換click動作中slideToggled的div內的「.plus」和「.minus」元素。

HTML

<div class="notification-box-heading"> 
    This is an Alert! 
    <span class="plus"><img src="http://www.cti-w.com/images/info.png"></span> 
    <span class="minus"><img src="http://www.cti-w.com/images/close.png"></span> 
</div> 

<div class="notification-box-body"> 
    <strong>This is an alert!</strong> 
    <p>This is the alert subtext.</p> 
</div> 

<div class="notification-box-heading"> 
    This is another Alert! 
    <span class="plus"><img src="http://www.cti-w.com/images/info.png"></span> 
    <span class="minus"><img src="http://www.cti-w.com/images/close.png"></span> 
</div> 

<div class="notification-box-body"> 
    <strong>This is an alert!</strong> 
    <p>This is the alert subtext.</p> 
</div> 

JS

$(document).ready(function() { 
    //hide the all of the element with class notification-box-body 
    $(".notification-box-body").hide(); 
    //hide the all of the element with class minus 
    $(".minus").hide(); 
    //slides the element with class "notification-box-body" when paragraph with class "notification-box-heading" is clicked 
    $(".notification-box-heading").click(function() { 
     $(this).next("div.notification-box-body").slideToggle(300); 
     $(".minus").toggle(); 
     $(".plus").toggle(); 
    }); 
}); 

http://jsfiddle.net/tqD6S/2/

任何想法？

Answer 1

被切換的元件，.notification-box-body是不包含.minus和.plus元素的元素。相反，容器元素實際上是被點擊的元素，.notification-box-heading。

嘗試：

$(".notification-box-heading").click(function() { 
    $(this).next("div.notification-box-body").slideToggle(300); 
    $(this).find(".minus,.plus").toggle(); 
}); 

見jsFiddle demo

Answer 2

$(".minus", this).toggle(); 
    $(".plus", this).toggle(); 

第二個參數定義範圍。

Answer 3

$(document).ready(function() { 
    //hide the all of the element with class notification-box-body 
    $(".notification-box-body").hide(); 
    //hide the all of the element with class minus 
    $(".minus").hide(); 
    //slides the element with class "notification-box-body" when paragraph with class "notification-box-heading" is clicked 
    $(".notification-box-heading").click(function() { 
     $(this).next("div.notification-box-body").slideToggle(300); 
     $(this).find(".minus").toggle(); 
     $(this).find(".plus").toggle(); 
    }); 
}); 

jsFiddle