Question

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

Answer 1

// slide toggle effect set to slow you can set it to fast too.
 $(".togglebox").hide();
 $(this).next(".togglebox").slideToggle("slow");

你的隐藏代码$(".toggleBox").hide();中有一个大写'B'，你应该先触发动作的顺序，然后在触发{之前隐藏所有“切换框”（不是当前的，但见下文） {1}}下一次滑行

示例JSFIDDLE

编辑为上面的代码意味着您无法切换当前的切换框

H2

由于后来添加了更多代码而无法提问;

更新了JSFiddle

Answer 2

我准备了一个DEMO H E R E

请告诉我这是否符合您的需求。

单击“下一个菜单标题”上的“取消上一个菜单”

HTML

CSS

2 个答案:

示例JSFIDDLE

更新了JSFiddle