Выпадающее меню на Jquery - JavaScript, Ajax

Cone · 15.05.2012, 09:24

День добрый,

Подскажите вчем может быть проблема.
Делаю выпадающее меню на подобие opera.com. При наведение на пункт основного меню под ним появляется стрелочка (приатачена) и выпадает подменю. Все вроде работате только вот почему-то подвсеми остальными пунктами главного меню (кроме первого), стрелочка загорается (т.е. добалеятся класс) только при повторном наведении. Наверное я чего-то намудрил ос криптом.
Сам далеко не гуру в jquery, только осваиваю. Так что "ткните носом" где и что не правильно!

Заранее благодарю!

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<title>Untitled</title>
	
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>	
<script type="text/javascript" src="http://malsup.github.com/jquery.corner.js"></script>	

</head>


<script type="text/javascript">
$(function(){
  $("ul.t_nav li a").hover(function(){
    $(this).parent().find("ul.sub_m").slideDown('fast').show(), $(this).parent().hover(function(){$(this).addClass("kep");},
		     function(){$(this).parent().find(".sub_m").slideUp('fast'),$(this).removeClass("kep");
		});
	  });
	});
	
	
</script>

<style>
* {
margin:0;
padding:0;
}

body {
font-family:Arial;
font-size:12px;
}

.kep {
background:url('images/ar.png') bottom center no-repeat;
}

a {
text-decoration:none;
color:white;
}


#menu {
display:block;
}

ul.t_nav  {
background: #333333;
list-style:none;
width:100%;
float:left;
position:relative;
height:30px;
line-height:30px;
}

ul.t_nav li {
float:left;
padding:0 20px;
}

ul.t_nav li ul.sub_m li {
padding:0;
}

ul.t_nav li a {
display:block;
}

ul.t_nav li ul.sub_m {
text-align:left;
border-top:3px solid red;
border-bottom:3px solid red;
background:#ee0000;
font-weight:bold;
box-shadow: black  0px 2px 2px;
position:absolute;
top:30px;
list-style:none inside;
display:none;
}

ul.t_nav li ul.sub_m li {
clear:both;
width:100%;
border-top:1px solid #ff7a7a;
}

ul.t_nav li  ul.sub_m li a {
color:white;
padding:0 6px;
background:#ee0000;
display:block;
}

ul.t_nav li  ul.sub_m li a:hover {
background:#a80000;
}

</style>

<body>

<div id="menu">
<ul class="t_nav">

	<li> <a href="#"> Пункт  </a>
	     <ul class="sub_m">
		 <li> <a href="#"> Подменю списка   </a></li>
		 <li> <a href="#">Подменю </a></li>
		 <li> <a href="#">Подменю </a></li>
		 <li> <a href="#">Подменю </a></li>
		 </ul>
	</li>
	
	<li> <a href="#"> Пункт </a>
	     <ul class="sub_m">
		 <li> <a href="#">Подменю </a></li>
		 <li> <a href="#">Подменю </a></li>
		 <li> <a href="#">Подменю </a></li>
		 <li> <a href="#">Подменю</a></li>
		 </ul>
	</li>
	<li> <a href="#"> Пункт </a></li>
	<li> <a href="#"> Пункт  </a></li>
</ul>
</div>

</body>
</html>

spein · 15.05.2012, 11:39

Код:

$(".t_nav li").hover(function() {
$(this).find(".sub_m").slideToggle("fast");
$(this).classToggle("active");
});

Вроде так

Cone · 15.05.2012, 11:55

Цитата:

Сообщение от spein

Код:

$(".t_nav li").hover(function() {
$(this).find(".sub_m").slideToggle("fast");
$(this).classToggle("active");
});

Вроде так

Спасибо! Теперь все работает только!
Только будет наоборот: не classToggle а toggleClass

spein · 15.05.2012, 12:05

Благодарю) путаю частенько)

15.05.2012, 11:39	#2
spein Программист Форумчанин Регистрация: 27.02.2009 Сообщений: 505	Код: `$(".t_nav li").hover(function() { $(this).find(".sub_m").slideToggle("fast"); $(this).classToggle("active"); });` Вроде так there are no limits when you're software engineer

15.05.2012, 12:05	#4
spein Программист Форумчанин Регистрация: 27.02.2009 Сообщений: 505	Благодарю) путаю частенько) there are no limits when you're software engineer

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
выпадающее меню на jquery	johny_03	JavaScript, Ajax	2	17.04.2014 16:58
Выпадающее меню на jQuery + галерея	T_i_m_o_n	HTML и CSS	1	09.05.2012 22:06
Выпадающее меню	Golovastik	JavaScript, Ajax	0	25.07.2010 02:40
Выпадающее меню	DICTATOR	Помощь студентам	3	28.11.2009 15:18
Выпадающее меню	dieselred	HTML и CSS	1	19.07.2009 21:45