Question

我正在使用Jquery来切换某些P标签上的显示。单击“更多”时，将显示所有文本。我希望点击监听器在显示内容时说“少”。此时它一直说“更多”。我需要在切换时将“更多”更改为“更少”。我已经能够通过删除允许显示和隐藏文本的类来实现这一目标，这会破坏目的，因为它是我关心的功能。

工作文字显示：

http://jsfiddle.net/5UgfH/

更多/更少的工作切换：

http://jsfiddle.net/LKJ5N/

<p> Please Help </p>

提前致谢。

Answer 1

看看这个插件，应该可以解决这个问题。 jQuery expander

Answer 2

只需注释掉h3隐藏逻辑（来自你的第一个小提琴）：

 //$("#moretext").click(function () {
 //    $('h3', this).toggle();
 //});

检查这是否有效：http://jsfiddle.net/5UgfH/1/

Answer 3

你不应该为此使用两个元素，只需交换文本即可你这样做是这样的：

$(document).ready(function () {
    $(".showhidetext").hide();
    var more = $('<h3 />', {id   :'more', 
                            text :'MORE',
                            on   : {
                                    click: function() {
                                      $(".showhidetext").toggle();
                                      $(this).text(function(_,txt) {
                                          return txt == 'MORE'?'LESS':'MORE';
                                      })
                                    }
                                }
                            }
               );
    $('#moretext').append(more);
});

FIDDLE

请注意，ID是唯一的，并且您只能在文档中使用相同的ID，因此请将#showhidetext更改为类

Answer 4

试试这个：

$(document).ready(function () {
    $("#showhidetext").toggle()
    var more_texts = ['MORE','LESS'];
    var text_flag = 0;
         $("#moretext").click(function(){
             $('#showhidetext').toggle();
             $(this).text(more_texts[++text_flag%2]);
         });
});

这样您就不需要隐藏/显示触发文字.toggle()的文字，只需要根据需要添加样式#showhidetext

JSFiddle Demo

使用带有文本显示的Jquery切换文本

4 个答案: