文章/答案/技术大牛

发布

社区首页 >问答首页 >如何仅显示当前列表项并隐藏其他项

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

Stack Overflow用户

提问于 2018-03-18 11:44:05

回答 1查看 426关注 0票数 0

我在下面的代码中注册了一个小部件

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

在这里，我想显示所有在类“当前的猫-父”下的列表项目，在本例中，类“当前-猫”的颜色为红色，“当前-猫”的颜色是“土木工程”。

如果这也可能的话请告诉我..。

谢谢

php

html

css

wordpress

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-03-18 11:50:17

尝试在这里使用: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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49347471

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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