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

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

如何更改切换另一个div的div的内容？

5 个答案: