jQuery是一種被廣泛使用的JavaScript框架,它可以顯著降低編寫JavaScript代碼的難度并提高其可讀性。在jQuery中,一個常見的操作是展開或收起全文。
下面是使用jQuery實現收起全文的代碼:
$(document).ready(function() { $('.show-more').click(function() { $('.text').toggleClass('shown'); $(this).text(function(i, oldText) { return oldText === '展開全文' ? '收起全文' : '展開全文'; }); }); });在這個代碼片段中,首先我們使用了jQuery的ready()方法,以確保DOM已經被完全加載后再運行代碼。 然后,我們通過click()方法來監聽展開/收起按鈕的點擊事件。當按鈕被點擊時,我們使用toggleClass()方法來切換文本塊的shown類,該類實現了展開和收起狀態之間的切換。 最后,我們使用text()方法來動態更新展開/收起按鈕的文本。 下面是樣式代碼:
.text { height: 100px; overflow: hidden; } .text.shown { height: auto; }這個樣式代碼片段定義了一個text類,它限制了文本塊的高度為100像素,并設置了溢出的隱藏。我們還定義了一個text.shown類,當它與文本塊的類相同時,可以自動調整高度以顯示完整的文本。 在前端開發中,jQuery收起全文是一個非常有用的功能,可以完美的實現整體頁面美觀和簡潔。
上一篇jquery 改變 高度
下一篇小程序在js中控制css