Sidebar伸縮器

昨天看了灝翰川流介紹Sidebar伸縮器, 今天又看了風言瘋語的 "激死我啦", 所以花點時間, 簡化了那個Sidebar伸縮器, 應用在我的網誌管理系統.

例子可看我右邊的 "網誌管理系統功能" Sidebar.  以下是Sidebar的內容:

---

function SwitchMenu(obj)
{
   if(document.getElementById)
   {
      var el = document.getElementById(obj);
      var ar = document.getElementById("masterdiv").getElementsByTagName("span");
      if(el.style.display != "block")
      {
         for (var i=0; i         {
            if (ar[i].className=="submenu")
               ar[i].style.display = "none";
         }
         el.style.display = "block";
      }
      else
      {
         el.style.display = "none";
      }
   }
}

function SwitchMenu(obj)
{
   if(document.getElementById)
   {
      var el = document.getElementById(obj);
      var ar = document.getElementById("masterdiv").getElementsByTagName("span");
      if(el.style.display != "block")
      {
         for (var i=0; i         {
            if (ar[i].className=="submenu")
               ar[i].style.display = "none";
         }
         el.style.display = "block";
      }
      else
      {
         el.style.display = "none";
      }
   }
}

function SwitchMenu(obj){
   if(document.getElementById){
      var el = document.getElementById(obj);
      var ar = document.getElementById("masterdiv").getElementsByTagName("span");
      if(el.style.display != "block"){
         for (var i=0; i            if (ar[i].className=="submenu")
               ar[i].style.display = "none";}
         el.style.display = "block";}
      else{el.style.display = "none";}}}

function SwitchMenu(obj)
{
   var el = document.getElementById(obj);
   if(el.style.display != "block")
      el.style.display = "block";
   else
      el.style.display = "none";
}

function SwitchMenu(obj)
{
   var el = document.getElementById(obj);
   if(el.style.display != "block")
      el.style.display = "block";
   else
      el.style.display = "none";
}
<script>
function SwitchMenu(obj)
{
   var el = document.getElementById(obj);
   if(el.style.display != "block")
      el.style.display = "block";
   else
      el.style.display = "none";
}
</script>
<div class="menutitle" onclick="SwitchMenu('sub1')">好友新文</div>
<span class="submenu" id="sub1"  style="display:block">
http://rank.memdb.com/?page=recent&strong</span>

<div class="menutitle" onclick="SwitchMenu('sub2')">文章評分訂閱</div>
<span class="submenu" id="sub2">http://rank.memdb.com/?page=status&strong</span>

<div class="menutitle" onclick="SwitchMenu('sub3')">最新加入會員</div>
<span class="submenu" id="sub3">http://rank.memdb.com/?page=recentMember </span>

---

註: 你必需自行修改oid=8244的數值為你的網誌管理系統編號和&size=5為你想顯示好友新文的數目. 另外, 以上沒有加讓會員訂閱你網誌的Link, 你需要自行加, 說明可以看本文的留言.

另外, 你可以把以下的CSS加在SinaBlog外觀設定的CSS設定, 你可以自己修改想要的Style. 

.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#8080FF;
color:#000000;
width:180px;
padding:2px;
text-align:center;
font-weight:bold;
border:1px solid #000000;
}

.submenu{
display: none;
margin-bottom: 0.5em;
}