如何更改可切换另一个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

在您的div点击处理程序中：

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

Answer 2

$(".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 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") 
    });

演示版

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');
});

jsFidle上的演示