jQuery的next()方法用于選擇當前元素的下一個同級元素,可以用于實現一些交互效果。結合show()方法可以實現元素的顯示和隱藏。下面我們來看一下具體的應用。
HTML代碼: <div class="item"> <h3>標題1</h3> <p>內容1</p> </div> <div class="item"> <h3>標題2</h3> <p>內容2</p> </div> <div class="item"> <h3>標題3</h3> <p>內容3</p> </div> JavaScript代碼: $(function(){ $(".item h3").click(function(){ $(this).next().show(); }); $(".item p").click(function(){ $(this).hide(); }); });
上面的代碼實現了以下功能:當點擊h3元素時,找到下一個同級元素p并顯示出來;當點擊p元素時,隱藏它自己。這樣就可以實現一個簡單的折疊展開效果。