這是目前正在做的這個POC的一個副產(chǎn)品，嗯。

當(dāng)左側(cè)導(dǎo)航太長的時候，通過js加上一個折疊展開的效果（用jquery，嗯），在頁面里導(dǎo)航加載后的任何地方以任何一種形式執(zhí)行如下的js（引用jquery的部分略掉）：

1: $('div.vertical > ul.root > li').each(function () { 2: var $a = $("<a style='float:right' href='javascript:void(0)' exp='1'><img border='0' src='/_layouts/images/dlmin.gif'/></a>") 3: .click(function () { 4: if ($(this).attr('exp') == '1') { 5: $(this).find('img').attr('src', '/_layouts/images/dlmax.gif'); 6: $(this).attr('exp', '0'); 7: $(this).parents('.menu-item').next().slideUp(); 8: } else { 9: $(this).find('img').attr('src', '/_layouts/images/dlmin.gif'); 10: $(this).attr('exp', '1'); 11: $(this).parents('.menu-item').next().slideDown(); 12: } 13: }); 14: $(this).find('span:eq(2)').append($a); 15: });

代碼很簡單，我就不解釋啥了，效果如下圖（歸功于jquery，這個是帶收縮展開動態(tài)效果的哦）：

（這個導(dǎo)航的樣式是靠CSS實現(xiàn)的，跟本文沒啥關(guān)系）

當(dāng)然，現(xiàn)在這個打開的時候依然是所有二級導(dǎo)航都處于展開狀態(tài)，稍微修改一下上面的代碼就可以很容易實現(xiàn)頁面剛加載的時候默認(rèn)折疊一些或所有的一級導(dǎo)航。

轉(zhuǎn)載于:https://www.cnblogs.com/erucy/archive/2011/06/24/2416107.html

總結(jié)

以上是生活随笔為你收集整理的左侧导航太长了？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。