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及其子项目，并希望隐藏所有其他项目和子项目。

直到这里，它是在Buwan的帮助下完成的（非常感谢）

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

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

<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>

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

1 个答案: