如何改变其切换另一个DIV一个div的内容？

Question

我的HTML是这样的：

<div> 
    <div class="action">Show details</div> 
    <div>Some hidden details</div> 
</div> 

我现在的JS是这样的：

$(".action").click(function(e) { 
     e.preventDefault(); 
     $(this).next("div").slideToggle('slow'); 
    }); 

我怎么也改变action div来 “隐藏详细信息”/ “显示详细信息” 的内容每个切换？

因此它清楚，点击链接将再次关闭DIV用户。

Answer 1

$(".action").click(function(e) { 
    e.preventDefault(); 
    var $container = $(this).next("div"); 
    var title = $container.is(':visible') ? "Show details" : "Hide details" ; 
    $container.slideToggle('slow'); 
    $(this).text(title); 
}); 

代码：http://jsfiddle.net/45Vz9/1/

Answer 2

在你的div click处理程序：

var next = $(this).next('div'); 
$(this).html(next.is(':visible') ? 'Hide Details' : 'Show Details'); 

Answer 3

试试这个

$(".action").toggle(
    function(e) { 
     e.preventDefault(); 
     $(this).next("div").slideDown('slow'); 
     $(this).html("Hide Details")}, 
    function(e) { 
     e.preventDefault(); 
     $(this).next("div").slideUp('slow'); 
     $(this).html("Show Details") 
    }); 

Demo

Answer 4

<div> 
    <div class="action">Show details</div> 
    <div class="toggleDiv">Some hidden details</div> 
</div>  

在Jquery的

$(".action").click(function() { 
    //e.preventDefault(); //what is it doing here 
    $(".toggleDiv").toggle("slow"); 
}); 

Answer 5

下面是另一种解决方案：

$(".action").click(function(e) { 
    e.preventDefault(); 
    var nextDiv= $(this).next("div"); 
    var title = nextDiv.is(':visible') ? "Hide" : "Show" ; 
    $(this).html(title); 
    $(nextDiv).slideToggle('slow'); 
}); 

Demo on jsFidle