切换wordpress subnav侧边栏项目

时间:2014-01-17 16:36:52

标签: jquery wordpress slidetoggle

我在Wordpress中的模板中有侧边栏导航。我正在使用CSS来隐藏subnav <li>元素,并使用jQuery来切换它们的可见性。这适用于WP之外,但不在模板中。

问题是如何/在何处嵌入JS(已经尝试过的页脚/标题),以使其工作。

这应该是它的工作方式:http://jsfiddle.net/MLUb8/

WP代码:

<div class="l-sidebar at_left">
    <div class="l-sidebar-h i-widgets">
        <!--IF IS PAGE-->
        <?php if ( is_page() ) { ?>
            <!--SHOW ALL SUBPAGES IN UNORDERED LIST-->
            <ul><?php
                if($post->post_parent){
                    $children .= wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=1");
                }
                else{
                    $children = '<li><a href="'.get_permalink($post).'">'.$post->post_title.'</a></li>';
                    $children .= wp_list_pages("title_li=&child_of=".$post->ID."&echo=1");
                }
                echo $children; ?>
            </ul>
        <?php } ?>
    </div>
</div>

RENDERED HTML:

<li class="page_item page-item-3671 page_item_has_children current_page_item">
    <a href="http://test.html">Executive Team</a>
    <ul class="children">
        <li class="page_item page-item-3791">
            <a href="test.html">Board of Directors</a>
        </li>
        <li class="page_item page-item-3771">
            <a href="test.html">Management</a>
        </li>
    </ul>
</li>
来自小提琴的jQuery:

$(document).ready(function() {
$("ul li.page-item-3791, ul li.page-item-3771").hide();
$("li.current_page_item").click(function() {
    $('.page_item .page-item-3791, ul li.page-item-3771').slideToggle('fast');
    return false;
});

});

1 个答案:

答案 0 :(得分:1)

您的HTML示例中不存在

$("#menu-item")。你可以这样做:

$('.children').hide();

$('.page_item_has_children').click(function() {
    $(this).find('.children').slideToggle();
});