Показать сообщение отдельно
  #4 (permalink)  
Старый 04.11.2013, 23:32
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Не очень хороший вариант, не кроссбраузерный, зато без всяких 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>
__________________
В личку только с интересными предложениями
Ответить с цитированием