Форум

utb · #1 (**permalink**) 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 · #2 (**permalink**) 01.12.2011, 09:27

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

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

utb · #3 (**permalink**) 01.12.2011, 09:34

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

ksa · #4 (**permalink**) 01.12.2011, 09:39

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

просто можно ли сделать такую выборку?

Типа как на

<body onload='myFnk()'>

так?

utb · #5 (**permalink**) 01.12.2011, 09:43

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

как то так

ksa · #6 (**permalink**) 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 · #7 (**permalink**) 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>

utb · #8 (**permalink**) 01.12.2011, 09:58

нет не сразу, вначале же не видно подменю, а вот когда появляется тогда и выборка.
спасибо, только для элемента li получается:

$('#menu > li > ul:visible').parent().addClass('tester');

?

ksa · #9 (**permalink**) 01.12.2011, 09:59

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

вначале же не видно подменю, а вот когда появляется тогда и выборка.

Так вот в момент появления и нужно добавлять тот класс!

ksa · #10 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript