问题与子菜单显示/隐藏点击

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');   
    }); 
});