Блог

Главная - Вопросы по программированию - Применить класс к родительскому UL, если дочерний LI содержит определенный класс

Применить класс к родительскому UL, если дочерний LI содержит определенный класс

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

В настоящее время я работаю над боковым меню, в котором будут перечислены все страницы в относительном разделе. Я в значительной степени отсортировал это, кроме одной маленькой вещи. У нас есть 2 уровня выпадающих списков, что означает, что ссылок очень много.

Активный LI будет иметь класс .current_page_item . Я пытаюсь придумать способ сказать: если UL имеет дочерний LI, содержащий .current_page_item класс, тогда примените .side_open класс к UL.

 $(document).ready(function(){
  
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Demo 1
    <ul>
      <li class="current_page_item">Demo 11</li>
    </ul>
  </li>
  <li>Demo 2
    <ul>
      <li>Demo 21</li>
    </ul>
  </li>
  <li>Demo 3
    <ul>
      <li>Demo 31</li>
    </ul>
  </li>
  <li>Demo 4
    <ul>
      <li>Demo 41</li>
    </ul>
  </li>
</ul>

Если у кого-нибудь есть какие-либо идеи о том, как это можно сделать, ваша помощь была бы высоко оценена!

Комментарии:

1. Пожалуйста, покажите свой код, который вы уже пробовали

Ответ №1:

Насколько я понимаю, вы хотите создать стиль прямого родительского элемента, если li выбрано. (Прокомментируйте меня, если я ошибаюсь)

Итак, вы должны достичь следующего:
(Сделано с помощью некоторого Javascript)

 $(document).ready(function() {
  $('ul>li>ul>li').each(function() {
    if ($(this).hasClass('current_page_item')) {
      $(this).parent().addClass('side_open');
    }
  });
});  
 .side_open {
  background: #ddd;
}

.current_page_item {
  background: #bbb;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Demo 1
    <ul>
      <li class="current_page_item">Demo 11</li>
    </ul>
  </li>
  <li>Demo 2
    <ul>
      <li>Demo 21</li>
    </ul>
  </li>
  <li>Demo 3
    <ul>
      <li>Demo 31</li>
    </ul>
  </li>
  <li>Demo 4
    <ul>
      <li>Demo 41</li>
    </ul>
  </li>
</ul>

Ответ №2:

Вы можете использовать .parentElement свойство для доступа к li ul .

 const linksArray = [...document.querySelectorAll('li')];

linksArray.forEach(link => {
  link.onclick = function() {
    linksArray.forEach(link => link.classList.remove('current_page_item'))
    this.classList.add('current_page_item')
    this.parentElement.classList.add('side_open')
  }
})  
 .current_page_item {
  background-color: aliceblue;
}

.side_open:before {
  content: 'I have side open class';
}  
 <ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

Ответ №3:

Вы можете сделать это с помощью jquery. Это очень просто, используя каждый цикл, обходите и проверяйте наличие класса в каждом LI и добавляйте .side_open класс в его родительский, если у этого li есть .current_page_item класс.

 $(document).ready(function(){
  $('ul.main_ul>li>ul.sub_ul>li').each(function(){
    if($(this).hasClass('current_page_item')){
      $(this).parent().addClass('side_open');
    }
  });
});  
 .side_open {
  background-color: red;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main_ul">
  <li class="main_li">Demo 1
    <ul class="sub_ul">
      <li class="current_page_item">Demo 11</li>
      <li class="current_page_item">Demo 12</li>
    </ul>
  </li>
  <li class="main_li">Demo 2
    <ul class="sub_ul">
      <li>Demo 21</li>
      <li>Demo 22</li>
    </ul>
  </li>
  <li class="main_li">Demo 3
    <ul class="sub_ul">
      <li>Demo 31</li>
      <li>Demo 32</li>
    </ul>
  </li>
  <li class="main_li">Demo 4
    <ul class="sub_ul">
      <li>Demo 41</li>
      <li>Demo 42</li>
    </ul>
  </li>
</ul>