单击下一个菜单标题取消切换上一个菜单答案

【问题标题】：Untoggle Previous Menus on click of the Next Menu Header单击下一个菜单标题取消切换上一个菜单
【发布时间】：2011-05-16 14:44:24
【问题描述】：

我使用 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;

【问题讨论】：

1.请在每个代码行前添加 4 个空格。 2.切换意味着在两种状态之间切换，所以你不能真正“取消切换”。 3. 你能添加一些html示例吗？
@user 如果您对其中一个答案感到满意，请将其标记为正确答案！

标签： javascript jquery html css frontend

【解决方案1】：

// 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

【讨论】：

我在上述问题中遇到了一些问题，请帮帮我。完整的代码被添加到上面的同一个问题中。
@user 您也可以将“slow”添加到slideUp("slow") 函数中，这样当一个正在打开而另一个正在关闭时，它看起来会更顺畅，或者您也可以简单地将其更改为hide()这可能看起来更生涩？ - 当我粘贴你的代码时，我发现最好给第一个表格单元格一个宽度（200px;）然后删除切换框上的宽度，这样标题和内容保持相同的宽度 - 我用你更新的代码更新了小提琴
@user755673 - 我已经用使用您的代码的小提琴更新了我的答案，并添加了我上面评论中提到的更改，看起来更好吗？
您最好在<html> 标签之前添加适当的文档类型，例如：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "*http*://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd"> <html>

【解决方案2】：

我准备了一个DEMO H E R E

让我知道这是否适合您的需求。

【讨论】：