具有單個jQuery功能的獨特可摺疊文本

我第一次使用jQuery，並且試圖追蹤最佳方式，在單個功能的頁面中多次顯示/隱藏部分文本。我有大約30個來自不同職員的「新聞簡報」，並且想要顯示每一個的第一段，並且可以選擇切換每個字母的其餘部分。以下是我已經制定了 -具有單個jQuery功能的獨特可摺疊文本

的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>

我需要重複這一過程，每個通訊預覽，但不希望每次的通訊需要調用一個獨特的功能。

我確定這是一個超級簡單的修復，我只有絕對零經驗。提前致謝！

來源

2014-06-27 acoffin16

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

每一個HTML元素的

<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

來源

2014-06-27 23:01:33

謝謝！那就是訣竅。還有一個問題>我嘗試更改.toggle to .slideToggle，並且一切似乎都正常工作_except_第一次點擊。任何想法，爲什麼這可能是？否則，這完美的作品。 – acoffin16

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/

來源

2014-06-27 23:02:16

具有單個jQuery功能的獨特可摺疊文本

回答

相關問題