Question

我正在使用wp_list_pages在我的网站中创建页面的导航。

有些页面有孩子，所以我需要导航中的下拉菜单来显示子页面。

我正在使用bootstrap来创建下拉菜单。

要使用bootstrap，我需要将类名添加到包含子页面的li，a和ul

我认为添加这些类的最佳方法是使用自定义walker类。

如何编写此自定义类以添加我需要的类。

输出的html

    <ul class="">
        <li class="page_item page-item-6 current_page_item"><a href="/">Home</a></li>
        <li class="page_item page-item-6 current_page_item"><a href="/">Profile</a></li>
        <li class="page_item page-item-8 page_item_has_children">
            <a href="">Products &#038; Services</a>
            <ul class='children'>
                <li class="page_item page-item-17"><a href="">Buying</a></li>
                <li class="page_item page-item-19"><a href="">Selling</a></li>
                <li class="page_item page-item-23"><a href="">Managing</a></li>
            </ul>
        </li>
    </ul>

我需要的HTML

    <ul class="">
        <li class="page_item page-item-6 current_page_item"><a href="/">Home</a></li>
        <li class="page_item page-item-6 current_page_item"><a href="/">Profile</a></li>
        <li class="page_item page-item-8 page_item_has_children dropdown">
            <a href="" data-toggle="dropdown" class="dropdown-toggle">Products &#038; Services</a>
            <ul class='children dropdown-menu'>
                <li class="page_item page-item-17"><a href="">Buying</a></li>
                <li class="page_item page-item-19"><a href="">Selling</a></li>
                <li class="page_item page-item-23"><a href="">Managing</a></li>
            </ul>
        </li>
    </ul>

Answer 1

使用jquery：

$(".page_item_has_children").each(function() {
  $(this).addClass("dropdown");
});

$("li.page_item_has_children > a").each(function() {
  $(this).addClass("dropdown-toggle");
  $(this).attr( "data-toggle", "dropdown" );
  $(this).next().addClass("dropdown-menu");
});

<强> Working Example

Wp_list_pages的Wordpress Walker类

1 个答案: