multiple slideDowns切換兩個元素

Question

我試圖找到一種方法來滑下一個div並更改點擊鏈接文本來說「只讀」，但只有下面的div。

<h2>Hello World</h2> 
<span class="trigger"><a href="javascript:;">Read more...</a> 
<div class="toggle_container">Isn't it a sunny day!</div> 

<h2>Hello Again!</h2> 
<span class="trigger"><a href="javascript:;">Read more...</a> 
<div class="toggle_container">Today isn't so sunny.</div> 

下面是我得到的最接近的，但是當任何錨點被點擊時，它都會有所有div。

$(document).ready(function() { 
    $('.toggle_container').hide(); 

    $("span.trigger a").click(function() { 
    $(".toggle_container").animate({ opacity: 1.0 },200).slideToggle(500, function() { 
     $("span.trigger a").text($(this).is(':visible') ? 'Read less...' : 'Read more...'); 
    }); 
}); 

}); 

Answer 1

這應該工作：

$(document).ready(function() { 
    $('.toggle_container').hide(); 

    $("span.trigger a").click(function() { 
    $(".toggle_container", $(this).parent()).animate({ opacity: 1.0 },200).slideToggle(500, function() { 
     $("a", $(this).parent()).text($(this).is(':visible') ? 'Read less...' : 'Read more...'); 
    }); 
    }); 
}); 

你需要傳遞$(this).parent()到選擇限制只有你點擊鏈接的父。否則，它將包含所有匹配的元素。

您還缺少收盤</span>我已經添加了他們下面

<h2>Hello World</h2> 
<span class="trigger"> 
    <a href="javascript:;">Read more...</a> 
    <div class="toggle_container">Isn't it a sunny day!</div> 
</span> 
<h2>Hello Again!</h2> 
<span class="trigger"> 
    <a href="javascript:;">Read more...</a> 
    <div class="toggle_container">Today isn't so sunny.</div> 
</span> 

你可以看到JS Fiddle

運行上面的代碼

Answer 2

(document).ready(function() { 
    $('.toggle_container').hide(); 
    $("span.trigger a").click(function() { 
     $(".toggle_container").animate({ opacity: 1.0 },200).slideToggle(500, function() { 
       $(this).previous('.trigger:first').children('a:first').text($(this).is(':visible') ? 'Read less...' : 'Read more...'); 
     }); 
    }); 
}); 

像這樣的事情應該工作，我希望這會給你一個想法如何解決這個問題。嘗試使用$（this）來選擇你想要的.trigger。使用.trigger選擇器將選擇class ='trigger'的所有元素。