Форум

otto_n · #1 (**permalink**) 04.11.2013, 15:27

Здравствуйте.
Занимаюсь самообучением, если у кого-то есть минутка не проигнорируйте направьте меня в правильное логическое русло

Не хватает опыта и пока не так много знаний. Передо мной сейчас стоит такая задача
Скажу сразу, что длинные замороченные коды-плагины меню из интернета мне не подходят.

Для меня важно минимальное кол-во строк. Я что-то написал вроде бы по логике должно работать, но последний уровень ul не открывается

http://jsfiddle.net/Eur2r/

Как должно работать: изначально видно только первый уровень списка ul li, по клику должен открыться второй уровень списка для текущего li и аналогично для последнего уровня. Направьте меня где ошибка? Или может здесь увидите, как это реализовать еще проще? При всем при этом каждое нажатие на определенном уровне должно скрывать братьев селекторов и отображать только тот который на котором в данный момент срабатывает событие.
Спасибо за ранее!

рони · #2 (**permalink**) 04.11.2013, 17:10

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>

otto_n · #3 (**permalink**) 04.11.2013, 18:18

рони,
Спасибо Вам большое! Это именно то, что нужно.

danik.js · #4 (**permalink**) 04.11.2013, 23:32

Не очень хороший вариант, не кроссбраузерный, зато без всяких 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>

Форум

Справочник

Discord чат

Курсы javascript