Question

我目前正在使用侧面菜单，该菜单将列出相关部分中的所有页面。我几乎将其与1件小东西分开了。我们有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>

如果有人对如何完成此操作有任何想法，将不胜感激！

Answer 1

您可以使用.parentElement属性来访问li的{{1}}。

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';
}

Answer 2

您可以使用jquery来实现。这很简单，使用每个循环，遍历并检查每个LI中的类，如果li具有SELECT u FROM User u WHERE lower(u.username) LIKE "foo OR ''==''"类，则在其父级中添加.side_open类。

.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;
}

Answer 3

据我了解，如果选择了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>

如果子项LI包含特定类别，则将类别应用于父UL

3 个答案: