這是目前正在做的這個POC的一個副產品，嗯。

當左側導航太長的時候，通過js加上一個折疊展開的效果（用jquery，嗯），在頁面里導航加載后的任何地方以任何一種形式執行如下的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，這個是帶收縮展開動態效果的哦）：

（這個導航的樣式是靠CSS實現的，跟本文沒啥關系）

當然，現在這個打開的時候依然是所有二級導航都處于展開狀態，稍微修改一下上面的代碼就可以很容易實現頁面剛加載的時候默認折疊一些或所有的一級導航。

轉載于:https://www.cnblogs.com/erucy/archive/2011/06/24/2416107.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。