我用CSS和Javascript创建了一个菜单。当我单击菜单主题（标题）时，它会切换并显示子类别。
我需要它做的是..当我单击任何其他菜单标题时，先前切换（显示）的子类别应该取消切换（隐藏），当前活动的菜单标题应该与其子类别一起切换。我怎样才能做到这一点？
这是我的代码..
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).next(".togglebox").slideToggle("slow");
$(".toggleBox").hide();
return true;
});
});
.HTML
现在还行了，但是当我点击它时有一些奇怪的动作。这是我剩下的 HTML 代码。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="toggle.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td>
<h2 style="background-color:#DAD0D0;">NOKIA</h2>
<div class="togglebox">
<div class="content">
<center><a href="#" style="text-decoration:none;"> NOKIA 8320 </a></center>
</div>
</div>
<h2 style="background-color:#EEE6E6;">SAMSUNG</h2>
<div class="togglebox">
<div class="content">
<center><a href="#" style="text-decoration:none;">SAMSUNG 3242C </a></center>
<center><a href="#" style="text-decoration:none;">SAMSUNG 3423C </a></center>
<center><a href="#" style="text-decoration:none;">SAMSUNG 7642C </a></center>
</div>
</div>
<h2 style="background-color:#DAD0D0;">SONY ERICSSON</h2>
<div class="togglebox">
<div class="content">
<center><a href="#" style="text-decoration:none;">SAMSUNG 3242C </a></center>
<center><a href="#" style="text-decoration:none;">SAMSUNG 3423C </a></center>
<center><a href="#" style="text-decoration:none;">SAMSUNG 7642C </a></center>
</div>
</div>
<h2 style="background-color:#EEE6E6;">ALCATEL</h2>
<div class="togglebox">
<div class="content">
<center><a href="#" style="text-decoration:none;">SAMSUNG 3242C </a></center>
<center><a href="#" style="text-decoration:none;">SAMSUNG 3423C </a></center>
<center><a href="#" style="text-decoration:none;">SAMSUNG 7642C </a></center>
</div>
</div>
</td>
<td width="70%">
</td>
</tr>
</table>
</body>
</html>
.CSS
h2 {
padding:10px;
font-size:10px;
color:#243953;
/* border: 1px solid #a9a9a9;
-moz-border-radius: 7px; /* Rounder Corner
-webkit-border-radius: 7px;
-khtml-border-radius: 7px; */
text-align:center;
font-family:Arial, Helvetica, sans-serif;
margin-bottom:10px;
margin: 0px;
}
.togglebox {
background-color:#F7F3F3;
border: 0px solid #a9a9a9;
/* Rounder Corner */
/* -moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 7px; */
overflow: hidden;
font-size: 1.2em;
width: 196px;
clear: both;
margin-bottom:0px;
margin-top:0px;
}
.togglebox .content {
padding: 20px;
// slide toggle effect set to slow you can set it to fast too.
$(".togglebox").hide();
$(this).next(".togglebox").slideToggle("slow");
你的隐藏代码中有一个大写的"B"，$(".toggleBox").hide(); ，你应该交换操作的顺序，先隐藏所有"切换框"（虽然不是当前的，见下文），然后再触发H2的下一个幻灯片
示例 JSFIDDLE
编辑为上面的代码意味着您无法切换当前切换框
// slide toggle effect set to slow you can set it to fast too.
var tb = $(this).next(".togglebox");
$(".togglebox").not(tb).slideUp();
$(tb).slideToggle("slow");
因为后来添加了更多的代码来质疑;
更新的 JSFiddle
我准备了一个演示 H E R E
让我知道这是否适合您的需求。