Помогите разобраться с многоуровневым вложением <li>
Здравствуйте.
Занимаюсь самообучением, если у кого-то есть минутка не проигнорируйте направьте меня в правильное логическое русло :)Не хватает опыта и пока не так много знаний. Передо мной сейчас стоит такая задача Скажу сразу, что длинные замороченные коды-плагины меню из интернета мне не подходят. :( Для меня важно минимальное кол-во строк. Я что-то написал вроде бы по логике должно работать, но последний уровень ul не открывается :( http://jsfiddle.net/Eur2r/ Как должно работать: изначально видно только первый уровень списка ul li, по клику должен открыться второй уровень списка для текущего li и аналогично для последнего уровня. Направьте меня где ошибка? Или может здесь увидите, как это реализовать еще проще? При всем при этом каждое нажатие на определенном уровне должно скрывать братьев селекторов и отображать только тот который на котором в данный момент срабатывает событие. Спасибо за ранее! |
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>
|
рони,
Спасибо Вам большое! Это именно то, что нужно. |
Не очень хороший вариант, не кроссбраузерный, зато без всяких jQuery (советую кстати начать изучение без использования всяких либ, что так сказать, понимать что происходит под капотом):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.tree a{
cursor: pointer;
}
</style>
</head>
<body>
<ul class="tree">
<li>
<a>Телефоны</a>
<ul>
<li>
<a>Apple</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li>
<a>Samsung</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a>Планшеты</a>
<ul>
<li>
<a>Apple</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li>
<a>Samsung</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a>Ноутбуки</a>
<ul>
<li>
<a>Apple</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li>
<a>Samsung</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
var tree = document.querySelector('.tree');
var labels = tree.querySelectorAll('a');
var onLabelClick = function(event) {
event.preventDefault();
var li = this.parentNode;
var ul = li.parentNode;
var active = ul.dataset.active;
if (active != null) {
ul.children[active].lastElementChild.style.display = 'none';
}
var subtree = this.nextElementSibling;
var isHidden = subtree.style.display == 'none';
subtree.style.display = isHidden ? '' : 'none';
ul.dataset.active = Array.prototype.indexOf.call(ul.children, li);
};
Array.prototype.forEach.call(labels, function(label) {
if (!label.href) {
label.addEventListener('click', onLabelClick);
var subtree = label.nextElementSibling;
subtree.style.display = 'none';
}
});
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 01:20. |