otto_n,
|
Сообщение от otto_n
|
|
каждое нажатие на определенном уровне должно скрывать братьев селекторов и отображать только тот который на котором в данный момент срабатывает событие.
|
вариант ... плюс добавлено отмена отображения при повторном нажатии (режим тригера)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(window).load(function(){
$("#oneLevelNav li > ul ").hide();
$("#oneLevelNav ul").each(function(indx, element){
$(element).click(function(event){
event.stopPropagation()});
var li = $(element).parent('li');
li.click(function(event){
event.stopPropagation();
if($(element).is(':visible')) {$(element).hide()}
else {
li.siblings().find('ul').hide();
$(element).show()}
})
});
});
</script>
</head>
<body>
<header>
<ul id="oneLevelNav" class="levelOne">
<li id="tel"><a href="#">Телефоны</a>
<ul id="twoLevelNav_tel" class="levelTwo">
<li id="tel_sam"><a href="#">Samsung</a>
<ul id="threeLevelNav_tel_sam" class="levelThree">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</li>
<li id="tel_app"><a href="#">Apple</a>
<ul id="threeLevelNav_tel_app" class="levelThree">
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</li>
<li id="tel_htc"><a href="#">HTC</a>
<ul id="threeLevelNav_tel_htc" class="levelThree">
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
</ul>
</li>
<li id="tel_nok"><a href="#">Nokia</a>
<ul id="threeLevelNav_tel_nok" class="levelThree">
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
</ul>
</li>
</ul>
</li>
<li id="pad"><a href="#">Планшеты</a>
<ul id="twoLevelNav_pad" class="levelTwo">
<li id="pad_sam"><a href="#">Samsung</a>
<ul id="threeLevelNav_pad_sam" class="levelThree">
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
</ul>
</li>
<li id="pad_app"><a href="#">Apple</a>
<ul id="threeLevelNav_pad_app" class="levelThree">
<li><a href="#">17</a></li>
<li><a href="#">18</a></li>
</ul>
</li>
</ul>
</li>
<li id="NB"><a href="#">Ноутбуки</a>
<ul id="twoLevelNav_NB" class="levelTwo">
<li id="nb_sam"><a href="#">Samsung</a>
<ul id="threeLevelNav_NB_sam" class="levelThree">
<li><a href="#">18</a></li>
<li><a href="#">19</a></li>
</ul>
</li>
<li id="nb_app"><a href="#">Apple</a>
<ul id="threeLevelNav_NB_app" class="levelThree">
<li><a href="#">21</a></li>
<li><a href="#">22</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</header>
</body>
</html>