Javascript 隐藏和显示菜单子项

我目前正在使用一个jquery，它在单击菜单项时隐藏并显示几个div

然而，此时，如果要单击同一菜单项，新打开的div将保持打开状态，而不是根据需要关闭。我还想在单击div类“submit”时实现隐藏div函数

任何建议都很好

Jquery

$("#one, #two, #three").hide();

$(".one, .two, .three").click(function (e) {
e.preventDefault();
$("#" + $(this).attr("class")).fadeIn(1000).siblings('#one, #two, #three').fadeOut(1000);
});

HTML

xx
空间
形式
身心
运动图像
白色小径
外国观点

关
文本
文本

使用

fadeToggle（）

而不是

fadeIn（）

。我猜您的意思是希望所有三个div都隐藏在

submit

上，这在下面起作用

$（“一、二、三”）.hide（）；
$（“.1、.2、.3”）。单击（函数（e）{
e、 预防默认值（）；
$（“#”+this.className）.fadeToggle（1000）.兄弟姐妹（“#一，#二，#三”）.fadeOut（1000）；
});
$（'.submit'）。单击（函数（e）{
$（'1，'2，'3'）。衰减（1000）；
});


xx
空间
形式
身心
运动图像
白道
外国观点

关
文本
文本
您没有为
.close
元素创建事件
如果要查看新元素并隐藏先前显示的元素，则需要将其设置为“显示无”，而不进行转换，因为元素是堆叠的，否则需要将元素更改为绝对元素
fiddle:
@AliGajani如果您单击div显示的其中一个菜单项，但再次单击同一个菜单项，并且没有发生任何事情，您想打开和关闭它们吗？是的，这将是理想的@AliGajani
<div id="nav">

<a href="#" class="one">WORK</a>
<a href="#" class="two">ABOUT</a>
<a href="#" class="three">CONTACT</a>
</div>

<div id="one">
<ul>
<li>xx</li> 
<li>Spaces</li>
<li>Form</li>
<li>Mind and Body</li> 
<li>Moving Image</li> 
<li>White Trails</li> 
<li>Foreign Views</li>
<ul>
<div class="submit"> close </div>
</div>

<div id="two">Text</div>
<div id="three">Text</div>