切换＆amp;在jQuery中重叠内容

Question

首先请原谅我对网络编程的无​​知，我正在学习。

我有一个带有三个按钮（摄影，视频和工作室）的菜单，点击show hiden elements：

• 摄影 - 显示子菜单
• 视频 - 显示子菜单
• studio - 显示一些文字

它们还显示了一个fullscreem透明度元素，突出显示网站页面上的隐藏元素。

一切都很完美：当我点击第一个按钮（摄影）时，子菜单会以透明度下降，但如果我点击下一个按钮后，视频子菜单会显示，但透明度消失，摄影子菜单仍然按下，重叠当前的。

激活当前效果时，有没有办法停用其他效果？

谢谢，希望我能说清楚。

HTML：

<div class="submenu" id="transparencia"></div>


<div class="menu" id="photography"><a href="">Photography</a></div>
<div class="menu" id="video"><a href="">Video</a></div>
<div class="menu" id="studio"><a href="">Studio</a></div>
<div class="menu" id="blog"><a href="http://whitedogstudio.tumblr.com/" target="_blank">Blog</a>    
</div>

<!-- photography -->

<div  class="submenu1" id="submenu1"><a href="">D-due</a></div>
<div  class="submenu1" id="submenu2"><a href="">Fabrege</a></div>
<div  class="submenu1" id="submenu3"><a href="">Rachael Antonio S/S 12</a></div>
<div  class="submenu1" id="submenu4"><a href="">Frankie Magazine</a></div>
<div  class="submenu1" id="submenu5"><a href="">Rachael Antonio</a></div>
<div  class="submenu1" id="submenu6"><a href="">Red Bull Backstage Fashion Show</a></div>
<div  class="submenu1" id="submenu7"><a href="">D-due Polaorids</a></div>
<div  class="submenu1" id="submenu8"><a href="">D-due</a></div>
<div  class="submenu1" id="submenu9"><a href="">Bargain</a></div>


<!-- video -->

<div  class="submenu2" id="submenu1"><a href="">D-due</a></div>
<div  class="submenu2" id="submenu2"><a href="">Fabrege</a></div>
<div  class="submenu2" id="submenu3"><a href="">Rachael Antonio S/S 12</a></div>
<div  class="submenu2" id="submenu4"><a href="">Frankie Magazine</a></div>
<div  class="submenu2" id="submenu5"><a href="">Rachael Antonio</a></div>
<div  class="submenu2" id="submenu6"><a href="">Red Bull Backstage Fashion Show</a></div>
<div  class="submenu2" id="submenu7"><a href="">D-due Polaorids</a></div>
<div  class="submenu2" id="submenu8"><a href="">D-due</a></div>
<div  class="submenu2" id="submenu9"><a href="">Bargain</a></div>

<!-- studio -->

<div  class="submenu3" id="about" align="center">
<p>text, text, text,text, text, text,text, text, text
</p>
</div>

JS / jQuery / jQuery UI /

<script>
$( "#photography" ).click(function() {
$( ".submenu1" ).toggle("fast","linear");
$( "#transparencia" ).toggle();
return false;
 });

 $( "#video" ).click(function() {
$( ".submenu2" ).toggle("fast","linear");
$( "#transparencia" ).toggle();
return false;

 });

 $( "#studio" ).click(function() {
$( ".submenu3" ).toggle("fast","linear");
$( "#transparencia" ).toggle();
return false;
 });

</script>


</body>
enter code here

CSS：

html, body {
  width: 100%;
  height: 100%;
  background-color: #FC6;
  font-family: helvetica, "Helvetica Neue";
}


.menu{
position: fixed;
top:30px;
width:300px;
font-weight:bold;
font-size: 12px;
font-style: normal;
z-index:3;
border:none;

}
#photography{   left:130px;}
#video{         left:230px;}
#studio{        left:290px;}
#blog{          left:355px;}

.submenu1{
display:none;
position: fixed;
left:130px;
width:180px;
padding:15px;
height:200px;
font-weight: 100;
font-size: 11px;
font-style: normal;
z-index:3;
border:none;
color:#333;
}

.submenu2{
display:none;
position: fixed;
left:230px;
width:180px;
padding:15px;
height:200px;
font-weight: 100;
font-size: 11px;
font-style: normal;
z-index:3;
border:none;
color:#333;
}

#submenu1{  top:60px;}
#submenu2{  top:80px;}
#submenu3{  top:100px;}
#submenu4{  top:120px;}
#submenu5{  top:140px;}
#submenu6{  top:160px;}
#submenu7{  top:180px;}
#submenu8{  top:200px;}
#submenu9{  top:220px;}


#transparencia {
display:none;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-image: url(../others/fondo.png);
z-index:2;
color: #FFF;
}

.submenu3{
display:none;
position: fixed;
top:90px;
left:285px;
text-align:justify;
float:left;
width:450px;    
padding:15px;
padding-top:10px;
z-index:3;
line-height:25px;
font-size:12px;
color: #000;
font-weight:100;
border:none;
}



a:link {        color: #000; text-decoration: none; }
a:visited {     color: #000;text-decoration: none;}
a:hover {       color: #000;}
a:active {      text-decoration: none;font-weight:none;}

.linkStyle2 a {         color: #999;text-decoration: none;}
.linkStyle2 a:link {    color: #999;text-decoration: none;}
.linkStyle2 a:visited { color: #999;text-decoration: none;}
.linkStyle2 a:hover {   color: #000;text-decoration: none;}
.linkStyle2 a:active {  text-decoration: none;}

.linkStyle3 a {         color: #000;text-decoration: none;}
.linkStyle3 a:link {    color: #000;text-decoration: none;}
.linkStyle3 a:visited { color: #000;text-decoration: none;}
.linkStyle3 a:hover {   color: #CCC;text-decoration: none;}
.linkStyle3 a:active {  text-decoration: none;}