問題與子菜單顯示/隱藏點擊

Question

我跟着一個很好的例子，如何使一個子菜單出現/消失點擊here並使其工作。自從我剛剛開始使用JavaScript以來，取得了很大的成就。但正如我做的那樣，還有其他一些問題出現了，我會試着解釋一下：

1.-我有一個垂直主菜單和其中一個選項'Products'有一個子類別，可以打開懸停在父項下方。當選擇其中一個子類別時，更大的菜單顯示在主菜單右側的新div中。發生這種情況時，所選的子類別會更改顏色並顯示一個項目符號，以便用戶知道他們正在查看哪個子類別。我正在使用PHP來檢測當前頁面並分配一個「活動」ID。但是當我擁有它時，子菜單顯示/隱藏不起作用，並且所有選項都在第一次進入頁面時顯示。因此，我將鏈接引用從「page.php」更改爲「＃」 - 這樣做更有意義，因爲該選項並非意味着鏈接，而是顯示另一個子菜單，但必須包含它以便顯示「活動」ID ---現在顯示/隱藏工程，除非我點擊一個子類別，右邊的菜單打開，但之前選擇的子類別在懸停時打開並關閉php檢測功能因爲我將引用更改爲「＃」，並且鏈接不顯示「活動」狀態;實際上，即使第二個div已經顯示，'home'選項也會保持選中狀態。

聽起來很混亂，我知道。例如，我希望我很清楚自己想要做什麼。如果有人知道解決方法，我會很感激。

2.-一旦我能得到這個固定的，有沒有辦法讓第二個div從左到右滑動而不是淡入？

感謝提前:)

Answer 1

看到我更新到您的代碼.. http://jsfiddle.net/Jaybles/tkVfX/4/

CSS

.mainNav { 
    float: left; 
    width: 200px; 
    height: 100%; 
    min-width: 150px; 
    background-color: #e21a22; 
} 
.active{ 
font-weight:bold; 
} 
.mainSide { 
    font-size: 14px; 
    list-style: none; 
    font-family: Helvetica,"Helvetica Neue",Arial,sans-serif; 
    padding-top: 40px; 
    width: 143px; 
    margin-right: auto; 
    margin-left: auto; 
} 

.mainSide li a, .mainSide li { 
    color: #fff; 
    width: 143px; 
    display: block; 
    padding: 2px 0 2px 0; 
    text-decoration: none; 
} 

.mainSide ul li a { 
    width: 125px; 
    list-style: none; 
    padding: 6px 0 2px 18px; 
} 

.mainSide li a:hover { 
    color: #fdb046; 
} 

.mainSide li a#active, .mainSide ul li a#active { 
    color: #fdb046; 
    background: url("../img/bullet.jpg") right center no-repeat; 
} 

#subNavSys, #subNavApp, #subNavAcc { 
    float: left; 
    width: 200px; 
    height: 100%; 
    min-width: 150px; 
    background-color: #414143; 
    display:none; 
} 

#subSideSys, #subSideApp, #subSideAcc { 
    font-size: 14px; 
    list-style: none; 
    font-family: Helvetica,"Helvetica Neue",Arial,sans-serif; 
    padding-top: 163px; 
    width: 143px; 
    margin-right: auto; 
    margin-left: auto; 
} 

#subSideSys li a, #subSideSys li, #subSideApp li a, #subSideApp li, #subSideAcc li a, #subSideAcc li { 
    color: #fff; 
    width: 143px; 
    display: block; 
    padding: 2px 0 2px 0; 
    text-decoration: none; 
} 

#subSideSys li a:hover, #subSideApp li a:hover, #subSideAcc li a:hover { 
    color: #fdb046; 

HTML

<div class="mainNav"> 
     <a href="index.php"><img id="top" src="img/metal.jpg" width="143" height="43" alt="Index" /></a> 
     <ul class="mainSide"> 
      <li><a href="index.php">Home</a></li> 
      <li><a href="about.php">About us</a></li> 
      <li>Products 
       <ul> 
        <li><a href="#" id="sys">By system</a></li> 
        <li><a href="#" id="app">By application</a></li> 
        <li><a href="#" id="acc">Accesories</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 

    <div id="subNavSys"> 

     <ul id="subSideSys"> 
      <li><a href="#">Sub-menu-1.1</a></li> 
      <li><a href="#">Sub-menu-1.2</a></li> 
      <li><a href="#">Sub-menu-1.3</a></li> 
     </ul> 
    </div> 

    <div id="subNavApp"> 
     <ul id="subSideApp"> 
      <li><a href="#">Sub-menu-2.1</a></li> 
      <li><a href="#">Sub-menu-2.2</a></li> 
      <li><a href="#">Sub-menu-2.3</a></li> 
     </ul> 
    </div> 

    <div id="subNavAcc"> 
     <ul id="subSideAcc"> 
      <li><a href="#">Sub-menu-3.1</a></li> 
      <li><a href="#">Sub-menu-3.2</a></li> 
      <li><a href="#">Sub-menu-3.3</a></li> 
     </ul> 
    </div> 

JS

$(document).ready(function(){ 

    $("#sys").click(function() { 

     $("#subNavApp").hide(); 
     $("#subNavAcc").hide(); 
     $("#subNavSys").fadeIn(800); 
     $('*').removeClass('active'); 
     $(this).addClass('active'); 
    }); 

    $("#app").click(function() { 
     $("#subNavSys").hide(); 
     $("#subNavAcc").hide(); 
     $("#subNavApp").fadeIn(800); 
     $('*').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
    $("#acc").click(function() { 
     $("#subNavSys").hide(); 
     $("#subNavApp").hide(); 
     $("#subNavAcc").fadeIn(800); 
     $('*').removeClass('active');   
     $(this).addClass('active');   
    }); 
});