css - 显示 WordPress 菜单的某些元素

Question

我在 Wordpress 中生成了一个具有三层的菜单。我用代码来做到这一点:

wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'SecondaryNavigation'));

Wordpress 会生成这样的菜单:

<div class="menu-mainnavigation_de-container">
<ul id="menu-mainnavigation_de" class="SecondaryNavigation">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39">
        <a href="http://localhost/fecheriye/de/einfuehrung/">Home</a>
        <ul class="sub-menu">
            <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="http://localhost/fecheriye/de/einfuehrung/">Einführung</a></li>
            <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="http://localhost/fecheriye/de/aktuelles/">Aktuelles</a></li>
        </ul>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-30 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-40">
        <a href="http://localhost/fecheriye/de/beschreibung/">Der Tell</a>
        <ul class="sub-menu">
            <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-30 current_page_item menu-item-42"><a href="http://localhost/fecheriye/de/beschreibung/">Beschreibung</a></li>
            <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://localhost/fecheriye/de/topographie/">Topographie</a></li>
        </ul>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-51">
        <a href="http://localhost/fecheriye/de/forschungsgeschichte/">Forschung</a>
        <ul class="sub-menu">
            <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://localhost/fecheriye/de/forschungsgeschichte/">Forschungsgeschichte</a></li>
            <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://localhost/fecheriye/de/forschungsprobleme/">Forschungsprobleme</a></li>
        </ul>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-65">
        <a href="http://localhost/fecheriye/de/kampagnen/">Kampagnen</a>
        <ul class="sub-menu">
            <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-64">
                <a href="http://localhost/fecheriye/de/ausgrabung-2010/">Ausgrabung 2010</a>
                <ul class="sub-menu">
                    <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"><a href="http://localhost/fecheriye/de/grabungsstelle-c-haus-i-sq-6644-5-6744-6-6844-6/">Grabungsstelle C &#8211; Haus I (Sq. 6644-5, 6744-6 &#038; 6844-6)</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我必须将菜单分成两个菜单:在顶部的标题中，只有第一层菜单是可见的。这对于 wp_nav_menu 的深度调用非常容易，并且工作得很好。在侧边栏中，我想显示菜单的相应第二级和第三级(.sub-menu 类下的所有内容)，具体取决于标题中选择的内容。我尝试通过 CSS 使用两行简单的代码来完成此操作:

.SecondaryNavigation {
  display: none;
  }

.SecondaryNavigation .current-menu-ancestor .sub-menu {
  display: block;
  }

不幸的是，这不起作用。如何根据在一级菜单中选择的内容，仅显示菜单的第二级和第三级？ Wordpress 会分配相应的类，例如 .current-menu-ancestor 或 .sub-menu，所以它一定可以通过某种方式实现，对吗？

感谢您的帮助!一切顺利塞巴斯蒂安

Answer 1

我会简单地创建二级菜单，然后相应地在页面上列出，这将是非常简单和有效的。

如果您需要进一步的帮助，请告诉我。