Question

我第一次使用jQuery，并尝试使用单一功能追踪在整个页面中多次显示/隐藏部分文本的最佳方式。我有大约30个＆＃34;时事通讯＆＃34;来自不同的工作人员，并希望显示每个人的第一段，并选择切换每个字母的其余部分。这就是我的成果 -

jQuery的：

$(function() {
$('#toggle').click(function() {
    $('.toggle').toggle();
    return false;
});
});

$(function(){
   $(".collapse").click(function () {
   $(this).text(function(i, text){
      return text === "Less" ? "More" : "Less";
      })
  });
})

HTML：

Preview text is here and <span class="toggle" style="display:none;">hidden text is here</span>
<a href="#" id="toggle" class="collapse">More</a>

我需要为每个简报预览重复这一点，但不要让每个简报需要调用一个独特的功能。

我确定这是一个非常简单的解决方案，我只是绝对没有经验。提前谢谢！

Answer 1

使用您的collapse课程和$.siblings()：

<p>
    Preview text is here and <span class="toggle" style="display:none;">hidden text is here</span>
    <a href="#" class="collapse">More</a>
</p>

$(function () {
    $('.collapse').click(function () {
        $(this)
            .siblings('.toggle').toggle().end()
            .text(function (i, text) {
                return text === "Less" ? "More" : "Less";
            });

        return false;
    });
});

http://jsfiddle.net/CpUQg/1

Answer 2

每个html元素的ID必须是唯一的。你应该使用类选择器来完成这项工作。

HTML

Preview text is here and <span class="toggle"><span class="toggle-content" style="display:none;">hidden text is here</span>
<a href="#" class="collapse">More</a>

的js

$(function() {
$('.collapse').click(function() {
    $(this).parent(".toggle").find(".toggle-content").toggle();
    $(this).text(function(i, text){
      return text === "Less" ? "More" : "Less";
      })
    return false;
});
});

http://jsfiddle.net/n3NLA/

独特的可折叠文本与单个jQuery功能

2 个答案: