jQuery и меню - JavaScript, Ajax

daemon-rm · 19.11.2011, 13:16

делаю простенький сайт, попутно изучая javascript...
есть меню:

Код:

ul.menu_menu {
	list-style:none;
	margin:0 0 1em 0;
	padding:0;
}
ul.menu_menu li {
	border-bottom:1px solid #ddd;
}
ul.menu_menu li a {
	text-decoration:none;
	display:block;
	padding:0.25em;
	background:url(../images/mainmenu_bullet.png) left no-repeat #336;
	padding-left:2em;
}
ul.menu_menu ul { list-style:none;}
ul.menu_menu li ul { display:none; list-style:none; margin:0;}
ul.menu_menu li ul li { float:none; border: none; }
ul.menu_menu li ul li ul { float:none; border: none;}

написал для это меню:

Код:

jQuery(document).ready(function($) {
  jQuery('.menu_menu li.parent').click(function(){
    var n = $(this).find('ul:first');
    if(n.css("display") == "none") {n.slideDown('slow');}
      else{ n.slideUp('slow');}
  });
});

а теперь не могу сделать так, чтобы при нажатии на открывшемся пункте меню(подчёркнуто на рисунке) не срабатывал slideUp.

Lesha · 19.11.2011, 13:53

весь код в студию!

daemon-rm · 19.11.2011, 14:24

что именно?

ZvEr_HaCkEr · 19.11.2011, 14:32

Может вам подойдет это?

Naive · 19.11.2011, 14:52

Структура иерархическая т.е.

Код:

ul1
  ul2
    ul3

При клике на 'ul3' по очереди сработают обработчики событий для 'ul3' 'ul2' 'ul1'.
Чтобы отменить обработку родительских элементов, вконце обработика надо прописать

Код:

return false;

Lesha · 19.11.2011, 16:19

Цитата:

что именно?

html код меню, ибо css иерархию никак не отражает

daemon-rm · 19.11.2011, 17:54

ZvEr_HaCkEr, спасибо.. но что-то работает не так, как надо. не раскрывает нужные подпункты, а наоборот следующий пункт меню скрывает..
Naive, а можно на моём примере показать куда именно прописывать?
Lesha, код генерируется движком - joomla 1.7.3. скрин из firebug сойдёт?

Naive · 20.11.2011, 09:49

Код:

jQuery(document).ready(function($) {
  jQuery('.menu_menu li.parent').click(function(){
    $(this).find('ul:first').slideToggle('slow');
    return false;
  });
});

daemon-rm · 20.11.2011, 13:42

но так ни одна ссылка не работает

ZvEr_HaCkEr · 20.11.2011, 14:43

Код:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />       
        <title>Untitled document</title>
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		  <![endif]-->
		  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
		  <style>
		  *{margin:0;padding:0;}
body{height: 100%; width: 100%;color: #ccc;font: 20px Georgia, Arial, Helvetica, sans-serif;}
ul {list-style: none;}
</style>
		  <script type="text/javascript">
$(document).ready(function(){
	$("ul").hide();
	$("h3 span").click(function(){
		$(this).parent().next().slideToggle();
	});
});
</script>
    </head>   
    <body>
	<section>
	<article>
				<h3>Сайты примеры<span>+</span></h3>
				<ul>
					<li><h3 style="padding-left:15px;">Парки<span>+</span></h3><ul style="padding-left:30px;">
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
				</ul></li>
					<li><h3 style="padding-left:25px;">Магазин<span>+</span></h3><ul style="padding-left:40px;">
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
				</ul></li>
					<li><h3 style="padding-left:35px;">Путешествия<span>+</span></h3><ul style="padding-left:50px;">
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
				</ul></li>
					<li><h3 style="padding-left:45px;">Отдых<span>+</span></h3><ul style="padding-left:60px;">
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
				</ul></li>
					<li><h3 style="padding-left:55px;">Развлечения<span>+</span></h3><ul style="padding-left:70px;">
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
					<li>Lorem ipsum dolor sit amet</li>
				</ul></li>
				</ul>
				</article>
</section>
</body>
</html>

19.11.2011, 14:52	#5
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Структура иерархическая т.е. Код: `ul1 ul2 ul3` При клике на 'ul3' по очереди сработают обработчики событий для 'ul3' 'ul2' 'ul1'. Чтобы отменить обработку родительских элементов, вконце обработика надо прописать Код: `return false;` Alar, верни репу!

20.11.2011, 09:49	#8
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Код: `jQuery(document).ready(function($) { jQuery('.menu_menu li.parent').click(function(){ $(this).find('ul:first').slideToggle('slow'); return false; }); });` Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
выпадающее меню на jquery	johny_03	JavaScript, Ajax	2	17.04.2014 16:58
JQuery простое меню	X@OC	JavaScript, Ajax	4	25.09.2011 19:56
Jquery Меню не работает в IE6,7	faustaka	JavaScript, Ajax	0	23.04.2011 12:14
Некорректная работа меню (jquery)	4e4en	JavaScript, Ajax	4	20.10.2010 08:49

19.11.2011, 13:53	#2
Lesha Форумчанин Регистрация: 30.01.2009 Сообщений: 418	весь код в студию!

19.11.2011, 14:24	#3
daemon-rm Пользователь Регистрация: 13.12.2009 Сообщений: 25	что именно?

19.11.2011, 14:32	#4
ZvEr_HaCkEr VisualC++/DirectX Форумчанин Регистрация: 16.07.2010 Сообщений: 831	Может вам подойдет это?

20.11.2011, 13:42	#9
daemon-rm Пользователь Регистрация: 13.12.2009 Сообщений: 25	но так ни одна ссылка не работает