代码之家  ›  专栏  ›  技术社区  ›  user2252219

切换div时更改文本

  •  0
  • user2252219  · 技术社区  · 10 年前

    单击时如何切换到“信息较少”?我尝试在css中使用::after提示符,但无法正常工作。我还想在css中设置“较少信息”的样式。也许我应该让它去上课?

    <div class="toggle">More Information</div>
    
    $(document).ready(function(){
      $(".content").hide();
    
      $(".toggle").on("click", function(e){   
          $(this).next('.content').slideToggle(200); 
    
        });
    });
    
    2 回复  |  直到 10 年前
        1
  •  4
  •   imbondbaby    10 年前

    使用 .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

        2
  •  1
  •   Tats_innit    10 年前

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

    细节 安全地假设您的内容高于“更多信息”,您可以遍历dom并使用 :visible flag 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');
                }
            });
    
        });
    });