在前端開發(fā)中,展開/收起功能是非常常見的一種交互形式。而使用 jQuery 實現(xiàn) div 的展開/收起則是一種簡單而又實用的方法。
要實現(xiàn)這個功能,首先需要在 HTML 中準備兩個按鈕,一個用于展開,一個用于收起。同時,需要將需要展開/收起的內容包裹在一個 div 中,并設置 id 屬性。
<button id="show">顯示</button> <button id="hide">隱藏</button> <div id="content"> <p>這里是需要展開/收起的內容。</p> </div>
然后,在 jQuery 中,可以使用 slideToggle() 方法來實現(xiàn) div 的展開/收起。該方法會根據(jù) div 的當前狀態(tài),自動執(zhí)行展開或收起操作。
$(document).ready(function() { $("#show").click(function() { $("#content").slideToggle(); }); $("#hide").click(function() { $("#content").slideToggle(); }); });
以上代碼中,首先通過 ready() 方法來確保 jQuery 已經(jīng)加載完畢。然后定義了兩個 click() 方法,分別對應于展開按鈕和收起按鈕。在每個方法中,使用 slideToggle() 方法來對內容 div 進行展開/收起操作。
這樣,當用戶點擊展開按鈕時,jQuery 會自動將內容 div 展開;當用戶點擊收起按鈕時,jQuery 會自動將內容 div 收起。代碼簡單易懂,非常適合前端開發(fā)初學者使用。