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

发布于 2024-11-07 09:04:21 字数 3779 浏览 2 评论 0原文

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

原文

I have created a menu using CSS and Javascript. When I click on a menu topic (Header) it gets toggled and shows the sub categories.

What I need it to do is.. when I click on any other menu headers the previously toggled (shown) sub category should untoggle (hide) and the currently active menu header should be toggled with its sub categories. How can I achieve this?

here is my code..

$(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

now it is kind of OK, but there are some weird movements when I click on it. Here is my remaining HTML code.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

静水深流 2024-11-14 09:04:21

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

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

you have a capital 'B' in your hide code, $(".toggleBox").hide(); and you should swap the order of the actions hide all the "toggleboxes" (not the current one though, see below) first before triggering the H2's next slidedown

Example JSFIDDLE

edited as the above code means you can't toggle the current togglebox

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

Because of later addition of more code to question;