Я создал меню с использованием 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;