Как можно отобразить только текущий элемент списка и скрыть другие

Я зарегистрировал виджет с приведенной ниже кодировкой

//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, который в данном случае предназначен для Civil Engineering.

Сообщите мне, возможно ли это.

Спасибо

php html css wordpress

18.03.2018 12:44

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Symfony Station Communiqué - 7 июля 2023 г

Это коммюнике первоначально появилось на Symfony Station .

Оживление вашего приложения Laravel: Понимание режима обслуживания

Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...

Установка и настройка Nginx и PHP на Ubuntu-сервере

В этот раз я сделаю руководство по установке и настройке nginx и php на Ubuntu OS.

Коллекции в Laravel более простым способом

Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...

Как установить PHP на Mac

PHP - это популярный язык программирования, который используется для разработки веб-приложений. Если вы используете Mac и хотите разрабатывать...

272

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Привет, Бхуван, это работает, у меня есть еще одна проблема, которую я только что добавил. Не могли бы вы взглянуть на это? Спасибо

— 18.03.2018 14:37

18.03.2018 12:50