Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.11.2014, 13:09
Новичок на форуме
Отправить личное сообщение для alexyarik Посмотреть профиль Найти все сообщения от alexyarik
 
Регистрация: 29.11.2014
Сообщений: 1

Как автоматически скрыть список подменю
Добрый день! Пытаюсь сделать выдвигающееся меню с использованием js, вроде все работает, но если выпадающий список раскрыт и нажать на новый пункт меню, второй выпадающий список добавляется к первому. Не пойму как сделать чтобы списки убирались автоматически при нажатии разных кнопок меню
код меню:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>

</head>

<body>
<div id="container">
<div id="header">



<ul class="menu"> 	
  
  <li><a class="menu_two" href="#two" >Создание сайтов</a></li>
       	 
        <li><a class="menu_thr" href="#thr" >Продвижение сайтов</a></li>
       	 
        <li><a class="menu_fou" href="#fou" >Дизайн</a></li>
       	 
        <li><a class="menu_fiv" href="#fiv" >Услуги</a></li>
       	 
        <li><a class="menu_six" href="#six" >О нас</a></li>
       </ul>

</div>
</div>
<ul class="two">
<li><a href="#">Ссылка #1</a></li>
<li><a href="#">Вебсайт #2</a></li>
<li><a href="#">Ссылка #1</a></li>
<li><a href="#">Ссылка #2</a></li>
<li><a href="#">Вебсайт #3</a></li>
<li><a href="#">Вебсайт #4</a></li>
<li><a href="#">Ссылка #3</a></li>
<li><a href="#">Ссылка #4</a></li>
</ul>
<ul class="thr">
<li><a href="#">Ссылка #1</a></li>
<li><a href="#">Вебсайт #2</a></li>
<li><a href="#">Ссылка #1</a></li>
<li><a href="#">Ссылка #2</a></li>

</ul>

</body>
</html>

slider.js
$(document).ready(function () {
    $('a.menu_two').click(function () {
	$('ul.two').slideToggle('medium');
	$(this).toggleClass("active");
    });
	  $('a.menu_thr').click(function () {
	$('ul.thr').slideToggle('medium');
	$(this).toggleClass("active");
    });
});

Стили:
Код:
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color: #333333;
}

#container {
	margin: auto;
	width: 490px;
}

#header {
	background-image: url(images/header.png);
	background-repeat: no-repeat;
	width: 567px;
	height: 43px;
	margin-bottom: 20px;
}

#button {
	height: 32px;
	width: 184px;
	margin: auto;
}

ul, li {
	margin:0; 
	padding:0; 
	list-style:none;
}

.menu_class {
	border:1px solid #1c1c1c;
}

.the_menu {
	display:none;
	width:300px;
	border: 1px solid #1c1c1c;
}

.the_menu li {
	background-color: #302f2f;
}

.the_menu li a {
	color:#FFFFFF; 
	text-decoration:none; 
	padding:10px; 
	display:block;
}

.the_menu li a:hover {
	padding:10px;
	font-weight:bold;
	color: #F00880;
}
.thr {
	display:none;
width: 1200px;
border: 1px solid #1c1c1c;
margin: 0 auto;
}

.thr li {
	background-color: #302f2f;
}

.thr li a {
	color:#FFFFFF; 
	text-decoration:none; 
	padding:10px; 
	display:block;
}

.thr li a:hover {
	padding:10px;
	font-weight:bold;
	color: #F00880;
}
.two {
	display:none;
width: 1200px;
border: 1px solid #1c1c1c;
margin: 0 auto;
}

.two li {
	background-color: #302f2f;
}

.two li a {
	color:#FFFFFF; 
	text-decoration:none; 
	padding:10px; 
	display:block;
}

.two li a:hover {
	padding:10px;
	font-weight:bold;
	color: #F00880;
}

.menu {
display: table;
position: relative;
top: 25px;
min-width: 900px;
left: 20px;
}
.menu li {
display: table-cell;
cursor: pointer;
text-align: center;
padding: 5px 0;
list-style: none;
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как скрыть все DIV кроме заданного ID при клике? sibfox777 Элементы интерфейса 1 24.11.2014 18:16
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 12:29
как скрыть блок div по ключевому слову Sacred13 Элементы интерфейса 6 06.08.2013 19:13
Как получить список всех установленных плагинов VitAngel Internet Explorer 0 15.07.2009 09:13
Как скрыть обработчик HTML-формы с помошью JavaScript? Мишаня Общие вопросы Javascript 5 15.06.2009 05:40