現在のセレクター$('li p a')
は、ドキュメント全体を検索して、段落の子である li の子であるアンカーを探します。.trigger
要素内のみを検索していることを確認する必要があります。
http://api.jquery.com/find/を参照してください。
$('.trigger').click(function() {
var trigger = $(this); // Store the clicked object in a variable and convert to jQuery object
trigger.children('.hidden').toggle('slow', function() {
if ($(this).is(':visible')) {
trigger.find('.plus').hide(); // trigger.find() allows us to search using our CSS selector only within the trigger object.
trigger.find('.minus').show();
} else {
trigger.find('.plus').show();
trigger.find('.minus').hide();
}
});
return false;
});
http://jsfiddle.net/NYZa3/1/
次のように書くこともできます。
$('.trigger').click(function() {
var trigger = $(this); // Store the clicked object in a variable and convert to jQuery object
trigger.children('.hidden').toggle('slow', function() {
trigger.find('.plus, .minus').toggle();
});
return false;
});
http://jsfiddle.net/NYZa3/4/
または、全体を連鎖させることもできます (アニメーションの表示/非表示が完了した後ではなく、クリックするとすぐに.plus
andが切り替わります)。.minus
$('.trigger').click(function() {
$(this)
.children('.hidden')
.toggle('slow')
.siblings('p')
.find('.plus, .minus')
.toggle();
return false;
});
http://jsfiddle.net/NYZa3/5/