如何突出显示父列表项而不突出显示子列表项?

时间:2011-01-23 13:40:50

标签: php html css wordpress nested-lists

我在使用Wordpress生成的链接列表时遇到问题,Wordpress会显示特定的页面链接以及所有子页面链接。当您将鼠标悬停在它们上方时,我正试图突出显示链接,然后当您单击它们并导航到该页面时,该页面的链接将保持突出显示。我找到了一种主要通过以下方式实现此目的的方法:

#sidebar a:hover{
    padding: 7px;
    background-color: #f7f9fe;
    color: #728186;
}
#sidebar ul > li .current_page_item{
    padding: 7px;
    background-color: #f7f9fe;
    color: #728186;
}

但是这不允许我突出显示父页面/ li。如果我使用:

#sidebar li.current_page_item

子项在其页面上保持突出显示,但在父页面上它还突出显示子项,而不仅仅是其本身。

这是我解析的php:

<ul id="sidebar" class="sidelist">
    <li class="pagenav"><h5>WHAT WE DO</h5>
        <ul>
            <li class="page_item page-item-39 current_page_item"><a href="http://www.autismrecoveryfoundation.org/meet-the-board" title="Meet the Board">Meet the Board</a>
            <ul class='children'>
                <li class="page_item page-item-84"><a href="http://www.autismrecoveryfoundation.org/meet-the-board/being-a-board-member-101" title="Being A Board Member 101">Being A Board Member 101</a></li>
            </ul>
            </li>
        </ul>
    </li>   
</ul>

以下是我在Wordpress页面中使用的关于wp列表页面的模板标记(http://codex.wordpress.org/Function_Reference/wp_list_pages):

<?php 
            // use wp_list_pages to display parent and all child pages all generations (a tree with parent)
            $parent = 39;
            $args=array(
             'title_li' => '',
             'child_of' => $parent
            );
            $pages = get_pages($args);  
            if ($pages) {
              $pageids = array();
              foreach ($pages as $page) {
                $pageids[]= $page->ID;
              }

              $args=array(
                'title_li' => '<h5>WHAT WE DO</h5>',
                'include' =>  $parent . ',' . implode(",", $pageids)
              );
              wp_list_pages($args);
            }
        ?>

1 个答案:

答案 0 :(得分:1)

<强>更新

要在平面列表中显示您的页面列表,请将depth设置为-1:

$args=array(
  'depth' => -1,
  'title_li' => '<h5>WHAT WE DO</h5>',
  'include' =>  $parent . ',' . implode(",", $pageids)
);

这样你就不必乱用子选择器了,你的子页面将不再包含在你的主页li中。


旧答案

问题出在这个选择器上:

#sidebar ul > li .current_page_item

#sidebar ul部分正在寻找来自ul的{​​{1}},但在您的代码中#sidebar ul 。此外,#sidebar会在包含您标题的li .current_page_item内找到任何 .current_page_item

将您的选择器更改为:

li

你也可以使用它,因为你的页面小部件还有它自己的类:

#sidebar > li > ul > .current_page_item