在網頁開發中,經常需要使用菜單來展示網站的結構和內容。而在jquery中,我們可以方便地使用一些方法來實現更多和收起菜單的效果。
首先,我們需要創建一個菜單的HTML結構,可以使用無序列表ul和li標簽來實現,如下所示:
<ul class="menu"> <li>菜單1</li> <li>菜單2</li> <li>菜單3</li> <li>菜單4</li> <li>菜單5</li> <li>菜單6</li> <li>菜單7</li> <li>菜單8</li> <li>菜單9</li> <li>菜單10</li> </ul>
接下來,我們需要使用jquery來實現更多和收起菜單的效果。可以使用addClass和removeClass方法來切換菜單的展示狀態,如下所示:
$('.menu li:gt(4)').hide(); // 先隱藏超過5個的菜單 $('.menu').append('<li class="more">更多</li>'); // 添加更多菜單 $('.menu li.more').click(function(){ $(this).siblings(':gt(4)').slideToggle(); // 切換超過5個菜單的展示狀態 $(this).toggleClass('open'); // 切換更多菜單的狀態 if($(this).hasClass('open')){ $(this).text('收起'); } else { $(this).text('更多'); } });
以上代碼實現了如下效果:默認隱藏超過5個的菜單,添加一個更多菜單并綁定點擊事件,點擊更多菜單時切換超過5個菜單的展示狀態,更多菜單的文本也隨之變化。
以上就是jquery實現更多和收起菜單的簡單方法,更多的效果可以自己嘗試實現。
上一篇div img 氣泡
下一篇div li圖片