VPF::Поиск следующего элемента - Форум программистов

GAM

Дата 16.10.2009, 02:39 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 3.3.2005

Репутация: нет
Всего: 2

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

Код


<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 это не работает(.
Т.е. это будет меню, которое раскрывает подменю при клике.

Это сообщение отредактировал(а) GAM - 16.10.2009, 02:40

EmilRegis

Дата 16.10.2009, 10:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 3
Всего: 4

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

Код


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

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

Код


#menu ul{
    display:block;
}

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

GAM

Дата 16.10.2009, 11:57 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 3.3.2005

Репутация: нет
Всего: 2

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

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

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

diadiavova

Дата 17.10.2009, 13:22 (ссылка)

(нет голосов)

Загрузка ...

Доктор Зло(диагност, настоящий, с лицензией и полномочиями)

Профиль
Группа: Модератор
Сообщений: 5820
Регистрация: 14.8.2008
Где: В Коньфпольте

Репутация: 8
Всего: 142

Код


<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>

--------------------

Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile

GAM

Дата 20.10.2009, 10:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 3.3.2005

Репутация: нет
Всего: 2

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

Это сообщение отредактировал(а) GAM - 20.10.2009, 10:42

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »