Question

如何点击时切换说少信息？我尝试在css中使用:: after提示但是无法使其正常工作。我还希望为“少量信息”设置风格。在css。也许我应该把它叫做上课？

<div class="toggle">More Information</div>

$(document).ready(function(){
  $(".content").hide();

  $(".toggle").on("click", function(e){   
      $(this).next('.content').slideToggle(200); 

    });
});

Answer 1

使用.text()替换div内的文字。

试试这个：

$(document).ready(function(){
  $(".content").hide();
  $(".toggle").on("click", function(){   
      $(this).next('.content').slideToggle(200);
      $(this).text($(this).text() == 'More Information' ? 'Less Information' : 'More Information');
    });
});

<强> JSFiddle Demo

<强>更新

您还可以使用:visible检查内容是否可见并相应地更改文字。

$(document).ready(function () {
    $(".content").hide();
    $(".toggle").on("click", function () {
        var txt = $(".content").is(':visible') ? 'More Information' : 'Less Information';
        $(".toggle").text(txt);
        $(this).next('.content').slideToggle(200);
    });
});

<强> JSFiddle Demo

Answer 2

可以这样做：演示 http://jsfiddle.net/f1dmhf0d/

API：.prev - http://api.jquery.com/prev/
或者可以查看：http://api.jquery.com/next-siblings-selector/

明细安全地假设您的内容高于＆＃34;更多信息＆＃34;你可以遍历dom并使用:visible标志aa =使用.text来改变文字

希望休息符合你的需要。 :)

<强>码

$(document).ready(function () {
    $(".content").hide();

    $(".toggle").on("click", function (e) {

        var $this = $(this).prev('.content');
        var $text = $(this);
        $this.slideToggle('slow', function () {
            if ($(this).is(':visible')) {
                $text.text('less info');
            } else {
                $text.text('more info');
            }
        });

    });
});

更改切换div上的文本

2 个答案: