Javascript 单击下一个菜单标题时不切换上一个菜单_Javascript_Jquery_Html_Css_Frontend

Javascript 单击下一个菜单标题时不切换上一个菜单

javascript jquery html css

Javascript 单击下一个菜单标题时不切换上一个菜单,javascript,jquery,html,css,frontend,Javascript,Jquery,Html,Css,Frontend,我使用CSS和Javascript创建了一个菜单。当我单击菜单主题标题时，它会切换并显示子类别我需要它做的是。。当我单击任何其他菜单标题时，先前切换显示的子类别应不切换隐藏，当前活动的菜单标题应与其子类别切换。我怎样才能做到这一点这是我的密码 $(document).ready(function(){ //Hide the tooglebox when page load $(".togglebox").hide(); //slide up and down when clic

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

隐藏代码$.toggleBox.hide中有大写字母“B”；你应该交换动作的顺序，隐藏所有的切换框，而不是当前的，在触发H2的下一个向下滑动之前先看下面

实例按上述代码编辑意味着您无法切换当前切换框

// 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");

因为后来增加了更多的代码来提问

更新我准备了一个演示

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

1。请在每个代码行前面添加4个空格。2.切换意味着在两种状态之间切换，所以你不能不切换。3.您能添加一些html示例吗？@user如果您对其中一个答案感到满意，请将其标记为正确答案！我在上面提到的问题中遇到了一些问题，请帮我解决。完整的代码被添加到上面的同一个问题中。@用户您也可以将slideUpslow添加到slideUpslow函数中，这样当一个打开，另一个关闭时，它看起来更平滑，或者您也可以简单地将其更改为隐藏，尽管这看起来更不稳定？-当我粘贴代码时，我发现给第一个表单元格一个200px的宽度更好；然后删除切换框上的宽度，这样标题和内容保持相同的宽度-我用你更新的code@user755673-我已经使用你的代码更新了我的答案，并添加了我在上面评论中提到的更改，这样看起来更好吗？您也可以在标记之前添加适当的Doctype，例如：

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

// 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");