Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Выборка элемента меню (https://javascript.ru/forum/jquery/23655-vyborka-ehlementa-menyu.html)

utb 01.12.2011 09:19
Выборка элемента меню
 
ситуация выбрать меню с открывающимся меню, подменю по умолчанию имеют в стиле display:none; при клике добавляю атрибут display:block;
как теперь выбрать элемент меню (и добавить ему класс) в котором открыто подменю:
примерно мысль такая по выборке
$("#menu li ul[style='display']").prev("#leftmenu li").addClass("tester");

Дерево меню(открытое) такое:
<ul id="menu">
<li><a>text</a></li>
[B]<li><a>text</a>[/B]
  <ul style="display:block;"><li><a>text</a></li></ul>
</li>
<li><a>text</a></li>

нужно изменить стиль для li (выделен жрным)

ksa 01.12.2011 09:27
utb, обычно с меню что-то делают по неким событиям, происходящим в самом меню... Что мешает выделить нужный пункт меню вместе с открытием подменю?

Т.ч. твоя ситуация не совсем понятна...

utb 01.12.2011 09:34
просто можно ли сделать такую выборку? а так в компонентах обычно указывается текущий активный элемент

ksa 01.12.2011 09:39
Цитата:
Сообщение от utb
просто можно ли сделать такую выборку?
Типа как на

<body onload='myFnk()'>


так?

utb 01.12.2011 09:43
не, выборка получается элемента содержащий др элемент с определенным атрибутом :) как то так

ksa 01.12.2011 09:50
utb, я спрашивал "в какой момент" производится выборка? :)

Если по onload например, то можно сделать например так...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.tester {
	color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$('#menu > li > ul').each(function(){
		if ($(this).css('display')=='block') {
			$(this).parent().children('a').addClass('tester');
		};
	});
});
</script>
</head>
<body>
<ul id="menu">
	<li><a>text</a></li>
	<li><a>text</a>
		<ul style="display:block;">
			<li><a>text</a></li>
		</ul>
	</li>
	<li><a>text</a></li>
</ul>
</body>
</html>

ksa 01.12.2011 09:54
Или вообще вот так... 

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.tester {
	color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$('#menu > li > ul:visible').parent().children('a').addClass('tester');
});
</script>
</head>
<body>
<ul id="menu">
	<li><a>text</a></li>
	<li><a>text</a>
		<ul style="display:block;">
			<li><a>text</a></li>
		</ul>
	</li>
	<li><a>text</a></li>
</ul>
</body>
</html>

:dance:

utb 01.12.2011 09:58
нет не сразу, вначале же не видно подменю, а вот когда появляется тогда и выборка.
спасибо, только для элемента li получается:
$('#menu > li > ul:visible').parent().addClass('tester');
?

ksa 01.12.2011 09:59
Цитата:
Сообщение от utb
вначале же не видно подменю, а вот когда появляется тогда и выборка.
Так вот в момент появления и нужно добавлять тот класс!

ksa 01.12.2011 10:06
Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#menu > li > ul {
	display: none;
}
li {
	cursor: pointer;
}
.tester {
	color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$('#menu > li > a').click(function (){
		$(this).toggleClass('tester');
		$(this).next('ul').toggle();
	});
});
</script>
</head>
<body>
<ul id="menu">
	<li><a>text</a></li>
	<li><a>text</a>
		<ul>
			<li><a>text</a></li>
		</ul>
	</li>
	<li><a>text</a></li>
</ul>
</body>
</html>

utb 01.12.2011 10:21
Спасибо))


Часовой пояс GMT +3, время: 20:41.