如何仅显示当前列表项并隐藏其他项

Question

我已经注册了一个带有以下编码的小部件

//Add our Widget Locations
function ourWidgetsMenu() {
  register_sidebar(array(
    'name' => 'Menu for Courses',
    'id' => 'menuforcourses'
  ));
}
add_action('widgets_init', 'ourWidgetsMenu');

并在 WordPress 管理员中添加了一个类别菜单，并使其显示为下面的编码，

<div class="menuincoursepages">
  <?php dynamic_sidebar( 'menuforcourses' ); ?>
</div>

它出现在如下源代码中

.menuincoursepages ul li {
  display: none;
}

.menuincoursepages .current-cat li {
  border: 1px solid green;
  padding: 10px;
  border-radius: 5px;
  display: block!important;
}

<div class="menuincoursepages">
  <li class="cat-item cat-item-3 current-cat"><a href="http://example.com/my-category/engineering/">Engineering</a> (11)
    <ul class='children'>
      <li class="cat-item cat-item-358"><a href="http://example.com/course-category/engineering/aerospace-engineering/" >Aerospace Engineering</a> (1)</li>
      <li class="cat-item cat-item-361"><a href="http://example.com/course-category/engineering/bioengineering/" >Bioengineering</a> (1)</li>
      <li class="cat-item cat-item-5"><a href="http://example.com/my-category/engineering/civil-engineering/">Civil Engineering</a> (11)
      </li>

    </ul>
  </li>
  <li class="cat-item cat-item-7"><a href="http://example.com/my-category/marketing/">Marketing</a> (1)
    <ul class='children'>
      <li class="cat-item cat-item-11"><a href="http://example.com/my-category/marketing/online-marketing/">Online Marketing</a> (1)
      </li>
    </ul>
  </li>
</div>

但问题是，我只想显示带有 current-cat 类的列表项，它是子项，并且想要隐藏所有其他项和子项。

到此为止，在卜万的帮助下完成了（非常感谢）

现在我遇到了另一个问题，

当我点击“土木工程”时，代码更改如下，

<div class="menuincoursepages">
  <li class="cat-item cat-item-3 current-cat-parent current-cat-ancestor"><a href="http://example.com/my-category/engineering/">Engineering</a> (11)
    <ul class='children'>
      <li class="cat-item cat-item-358"><a href="http://example.com/course-category/engineering/aerospace-engineering/" >Aerospace Engineering</a> (1)</li>
      <li class="cat-item cat-item-361"><a href="http://example.com/course-category/engineering/bioengineering/" >Bioengineering</a> (1)</li>
      <li class="cat-item cat-item-5 current-cat"><a href="http://example.com/my-category/engineering/civil-engineering/">Civil Engineering</a> (11)
      </li>

    </ul>
  </li>
  <li class="cat-item cat-item-7"><a href="http://example.com/my-category/marketing/">Marketing</a> (1)
    <ul class='children'>
      <li class="cat-item cat-item-11"><a href="http://example.com/my-category/marketing/online-marketing/">Online Marketing</a> (1)
      </li>
    </ul>
  </li>
</div>

在这里，我想显示“current-cat-parent”类下的所有列表项，“current-cat”类的颜色为红色，在这种情况下用于“土木工程”

如果这也是可能的，请告诉我..

谢谢

Answer 1

尝试在此处使用:not() 选择器...

.menuincoursepages li:not(.current-cat) {
  display: none;
}

.menuincoursepages .current-cat li {
  border: 1px solid green;
  padding: 10px;
  border-radius: 5px;
  display: block;
}

<div class="menuincoursepages">
  <li class="cat-item cat-item-3 current-cat"><a href="http://example.com/my-category/engineering/">Engineering</a> (11)
    <ul class='children'>
      <li class="cat-item cat-item-5"><a href="http://example.com/my-category/engineering/civil-engineering/">Civil Engineering</a> (11)
      </li>
    </ul>
  </li>
  <li class="cat-item cat-item-7"><a href="http://example.com/my-category/marketing/">Marketing</a> (1)
    <ul class='children'>
      <li class="cat-item cat-item-11"><a href="http://example.com/my-category/marketing/online-marketing/">Online Marketing</a> (1)
      </li>
    </ul>
  </li>
</div>

已更新：您将需要更改 CSS，如下所示

.menuincoursepages li {
  display: none;
}

.menuincoursepages li.current-cat,
.menuincoursepages li.current-cat-parent,
.menuincoursepages li.current-cat li,
.menuincoursepages li.current-cat-parent li {
  display: block;
}

.menuincoursepages .current-cat li,
.menuincoursepages .current-cat-parent li {
  border: 1px solid green;
  padding: 10px;
  border-radius: 5px;
}

.menuincoursepages li.current-cat {
  border-color: red;
}

<div class="menuincoursepages">
  <li class="cat-item cat-item-3 current-cat-parent current-cat-ancestor"><a href="http://example.com/my-category/engineering/">Engineering</a> (11)
    <ul class='children'>
      <li class="cat-item cat-item-358"><a href="http://example.com/course-category/engineering/aerospace-engineering/">Aerospace Engineering</a> (1)</li>
      <li class="cat-item cat-item-361"><a href="http://example.com/course-category/engineering/bioengineering/">Bioengineering</a> (1)</li>
      <li class="cat-item cat-item-5 current-cat"><a href="http://example.com/my-category/engineering/civil-engineering/">Civil Engineering</a> (11)
      </li>

    </ul>
  </li>
  <li class="cat-item cat-item-7"><a href="http://example.com/my-category/marketing/">Marketing</a> (1)
    <ul class='children'>
      <li class="cat-item cat-item-11"><a href="http://example.com/my-category/marketing/online-marketing/">Online Marketing</a> (1)
      </li>
    </ul>
  </li>
</div>