Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Поиск следующего элемента

Автор: GAM 16.10.2009, 02:39

Здравствуйте.
Есть, к примеру, такой код:

Код


<ul id="menu">
    <li>
        <a href="#">link_1</a>
        <ul>
            <li><a href="#">link_1a</a></li>
            <li><a href="#">link_1b</a></li>
            <li><a href="#">link_1c</a></li>
            <li><a href="#">link_1d</a></li>
            <li><a href="#">link_1e</a></li>
        </ul>
    </li>
</ul>

Как можно назначить следующему элементу (тегу ul) свойство display: block;?
Вся сложность в том, что нельзя назначить какие-то классы или идентификаторы на теги.

Скрипт такой:

Код


var a = document.getElementById('menu').getElementsByTagName('A');
var ul = document.getElementById('menu').getElementsByTagName('UL');

// Закрываю все подменю
for (var i=0;i<ul.length;i++) {
    ul[i].style.display = "none";
}

// Назначаю события на тег а
for (var i=0;i<a.length;i++) {
    a[i].onmouseover = function () {this.style.backgroundColor='#cc0000'};
    a[i].onmouseout = function () {this.style.backgroundColor='#ffffff'};
    a[i].onclick = click;
}

function click() {
    this.nextElementSibling.style.display='block';
}

Пробовал вот через nextElementSibling, но в ie6 это не работает(.
Т.е. это будет меню, которое раскрывает подменю при клике.

Автор: EmilRegis 16.10.2009, 10:36

вам надо это реализовать именно в dom'е?
Так то, если я правильно понял и вам нужно стиль назначить только первому элементу, то

Код


#menu ul:first-child{
    display:block;
}

если всем дочерним элементам, то

Код


#menu ul{
    display:block;
}

А если нужно менять стиль динамически, то можно воспользоваться jquery...
А, если не секрет, в чём причина того, что нельзя задавать классы и идентификаторы?

Автор: GAM 16.10.2009, 11:57

Немного не то.
Процесс открытия должен быть при клике на тег а.
Т.е. при клике находился следующее за этим тегом подменю (тег ul) и назначаться ему стиль display: block;

Если грузить Jquery, то использоваться кроме как для меню нигде не будет, а грузить лишние килобайты не хочется.

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

Автор: diadiavova 17.10.2009, 13:22

Код


<ul id="menu">
    <li>
        <a href="#" onclick="changeVisibility(this);">link_1</a>
        <ul style="display:none;" id="ul1">
            <li><a href="#">link_1a</a></li>
            <li><a href="#">link_1b</a></li>
            <li><a href="#">link_1c</a></li>
            <li><a href="#">link_1d</a></li>
            <li><a href="#">link_1e</a></li>
        </ul>
    </li>
</ul>

<script type="text/javascript">
    function changeVisibility(src)
    {
        var target = src.parentNode.getElementsByTagName("ul").item(0);
        target.style.display=target.style.display=='none'?'block':'none';        
    }
</script>

Автор: GAM 20.10.2009, 10:42

Спасибо diadiavova, хорошее решение!