0
<div id="a">
<ul>
<li>
<div class="name" onclick="func(this)">name1</div>
<div class="submenu">
добрать сюда
</div>
</li>
<li>
...
</li>
<li>
...
</li>
</ul>
</div>

После нажатия нужно изменить стиль подменю, но я не могу получить элемент.

НА JS

9
  • Покажи код функции func()
    – copist
    19 июн 2014 в 16:30
  • На чистом JS: 10 лучших функций на JavaScript: getElementsByClassName и там же есть addClass/removeClass.
    – Alex Krass
    19 июн 2014 в 17:05
  • @Pavel Volyntsev function(el) { el.style.color = "red"; el.parentNode.childNodes[1].style.display = "block"; } Не работает. И выглядит ужасно.
    – andrey3
    19 июн 2014 в 17:20
  • @Alex Krass класс добавлен с самого начала в html, у него просто стоит свойство display none, и вот это свойство нужно изменить у выбранного елемента
    – andrey3
    19 июн 2014 в 17:21
  • Замените вторую строку: document.getElementsByClassName('name')[0].style.display = 'block';
    – andreyqin
    19 июн 2014 в 17:26

3 ответа 3

2
func(that) {
    var nextElem = elem.nextElementSibling;
    if (nextElem === undefined) {
        nextElem = elem.nextSibling;
        while (nextElem && nextElem.nodeType != 1) {
            nextElem = nextElem.nextSibling;
        }
    } 
    nextElem.style.className += 'style';
}
4
  • @lampa а почему вот здесь проверка на undefined и зачем цикл? разве не можно его убрать
    – andrey3
    19 июн 2014 в 17:49
  • Свойство nextElementSibling - это для IE и этого свойства может не быть если это не IE(undefined), тогда используется nextSibling для остальных браузеров. В свою очередь между тегами могут быть пробелы и прочие особые элементы, которые тоже ловятся nextSibling, поэтому идет цикл до nodeType равный ELEMENT_NODE = 1;
    – Alex Krass
    19 июн 2014 в 17:55
  • class Name ` ^^^`
    – copist
    19 июн 2014 в 18:07
  • C телефона писал. Он, зараза, пробел поставил.
    – lampa
    20 июн 2014 в 3:55
2

Пример с использованием jQuery:

$('.name').on('click', function() {
    $('.submenu').css(/* тут меняете стили */);
});

Либо можно задавать стили не напрямую, а устанавливать элементу класс, а стили задавать отдельно:

$('.name').on('click', function() {
    $('.submenu').addClass('className');
});

Если на странице у вас несколько подменю и при клике на элементе нужно находить соседнее, то просто перемещаетесь по DOM относительно кликнутого элемента:

$('.name').on('click', function() {
    $(this).next().addClass('className');
});

Как видите, все очень просто и кроссбраузерно.

И не нужно устанавливать обработчик в разметке, почитайте про ненавязчивый JavaScript.

10
  • Просто для интереса - а с чего вы взяли, что автору подойдет jquery?
    – Alex Krass
    19 июн 2014 в 16:56
  • А почему он должен не подойти? Код решает задачу. К тому же это намного проще и удобней, чем писать велосипеды на голом JS.
    – andreyqin
    19 июн 2014 в 17:05
  • И конечно было бы правильней добавить элементу класс с помощью метода .addClass(), а стили устанавливать отдельно.
    – andreyqin
    19 июн 2014 в 17:08
  • Может у него высоконагруженный ресурс, в котором каждый байт на счету, а вы ему лишние килобиты суете. Или уже есть несколько других библиотек, которые конфликтуют с JQuery. Конечно надумано, но вообще стоит пояснять, что используется сторонняя либа.
    – Alex Krass
    19 июн 2014 в 17:10
  • 1
    >>> Задание от преподавателя или желание работодателя проверить навыки претендента @Alex Krass, это повод к удалению вопроса. Без обид. Такие правила.
    – copist
    19 июн 2014 в 18:52
1
$('#a').on('click', '.name', function() {
$('.submenu').addClass('new_style'); });

.new_style { ~ код стиля }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.