切換div后更改文本

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演示

UPDATE

您也可以使用: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演示

Answer 2

可能會這樣： 演示 http://jsfiddle.net/f1dmhf0d/

• API： .prev - http : .prev
• 或可以調查以下內容： http : //api.jquery.com/next-siblings-selector/

如果您的內容位於“更多信息”之上，則可以安全地進行詳細說明，您可以遍歷dom並使用:visible標志aa = ccording來使用.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');
            }
        });

    });
});