Форум

rafaello · #1 (**permalink**) 16.04.2018, 17:09

Ребята, выручайте пожалуйста.
Есть вложенное меню

<div class="nav__dropdown">
           <div class="nav__dropdown-item">
                <a href="#" class="nav__dropdown-link">Территория обслуживания сетевой организации </a>
           </div>
           <div class="nav__dropdown-item">
                  <a href="#" class="nav__dropdown-link">Передача электрической энергии</a>
             </div>
              <div class="nav__dropdown-item">
                    <a href="#" class="nav__dropdown-link ">РАСКРЫТИЕ ИНФОРМАЦИИ</a>
                           <div class="nav__dropdown nav__dropdown_second">
                                     <div class="nav__dropdown-item">
                                           <a href="#" class="nav__dropdown-link">Общая информация о передаче электрической энергии</a>
                                       </div>
                                        <div class="nav__dropdown-item">
                                             <a href="#" class="nav__dropdown-link">Нормативные документы</a>
                                          </div>
                                        </div>
                                    </div>
                                </div>

первый уровень дивы класса nav__dropdown-item
второй уровень дивы класса nav__dropdown_second
Вопрос. Необходимо добавить класс "nav__dropdown-link_dropdown" к ссылке, если присутствует второй уровень вложенности. То есть, если после ссылки идет див с классом nav__dropdown_second то к ссылке надо прибавить класс "nav__dropdown-link_dropdown"

В данном случае надо добавить класс "nav__dropdown-link_dropdown" к ссылке с текстом РАСКРЫТИЕ ИНФОРМАЦИИ

j0hnik · #2 (**permalink**) 16.04.2018, 17:41

[].forEach.call(document.querySelectorAll('.nav__dropdown-link'), function(el){
	if(el.nextElementSibling && el.nextElementSibling.matches('.nav__dropdown_second')) el.classList.add('nav__dropdown-link_dropdown');
});

рони · #3 (**permalink**) 16.04.2018, 17:46

rafaello,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .nav__dropdown-link_dropdown{
      background-color: #0000CD;
      color: #FFFFFF;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    $(".nav__dropdown_second").prev("a.nav__dropdown-link").addClass("nav__dropdown-link_dropdown")
});
  </script>
</head>

<body>
<div class="nav__dropdown">
           <div class="nav__dropdown-item">
                <a href="#" class="nav__dropdown-link">Территория обслуживания сетевой организации </a>
           </div>
           <div class="nav__dropdown-item">
                  <a href="#" class="nav__dropdown-link">Передача электрической энергии</a>
             </div>
              <div class="nav__dropdown-item">
                    <a href="#" class="nav__dropdown-link ">РАСКРЫТИЕ ИНФОРМАЦИИ</a>
                           <div class="nav__dropdown nav__dropdown_second">
                                     <div class="nav__dropdown-item">
                                           <a href="#" class="nav__dropdown-link">Общая информация о передаче электрической энергии</a>
                                       </div>
                                        <div class="nav__dropdown-item">
                                             <a href="#" class="nav__dropdown-link">Нормативные документы</a>
                                          </div>
                                        </div>
                                    </div>
                                </div>

</body>
</html>

Dilettante_Pro · #4 (**permalink**) 16.04.2018, 17:47

Вариант - не обязательно рядом. В том же диве

<style>
.nav__dropdown-link_dropdown { color: red;}
</style>
<div class="nav__dropdown">
   <div class="nav__dropdown-item">
      <a href="#" class="nav__dropdown-link">Территория обслуживания сетевой организации </a>
   </div>
   <div class="nav__dropdown-item">
      <a href="#" class="nav__dropdown-link">Передача электрической энергии</a>
   </div>
   <div class="nav__dropdown-item">
      <a href="#" class="nav__dropdown-link ">РАСКРЫТИЕ ИНФОРМАЦИИ</a>
      <div class="nav__dropdown nav__dropdown_second">
         <div class="nav__dropdown-item">
            <a href="#" class="nav__dropdown-link">Общая информация о передаче электрической энергии</a>
         </div>
         <div class="nav__dropdown-item">
            <a href="#" class="nav__dropdown-link">Нормативные документы</a>
         </div>
      </div>
   </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('.nav__dropdown_second').parent().children('.nav__dropdown-link').addClass('nav__dropdown-link_dropdown');
</script>

rafaello · #5 (**permalink**) 16.04.2018, 17:56

Спасибо что помогаете!!!! Только вот без начала... Как обернуть эту функцию. Пожалуйста, голову дайте. Простите за наивность!!!

rafaello · #6 (**permalink**) 16.04.2018, 17:58

а.... просто страницу не обновил, теперь вижу... Спасибо большое!!!!

Форум

Справочник

Discord чат

Курсы javascript