WordPress jQuery Toggle基于类别

时间:2010-03-29 15:39:58

标签: jquery wordpress

我有以下导航:

<li id="categories">
    <ul>
        <li class="cat-item cat-item-8 current-cat"><a href="#">Link</a>
            <ul>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a></li>
            </ul>
        </li>
        <li class="cat-item cat-item-10"><a href="#">Link</a>
            <ul>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a></li>
                <li class="cat-item"><a href="#">Link</a>
                    <ul>
                        <li class="cat-item"><a href="#">Link</a></li>
                        <li class="cat-item"><a href="#">Link</a></li>
                        <li class="cat-item"><a href="#">Link</a></li>
                        <li class="cat-item"><a href="#">Link</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</li>

以及以下JS:

jQuery("#categories li.cat-item").each(function(){
    var item = jQuery("<span>").addClass('plus'),
        that = jQuery(this);

    if ( that.has("ul").length ) {   
        item.click(function(e){
            var self = jQuery(this);
            self.text( self.text() === "+" ? "-" : "+" )
                .parent().next().toggle();
            e.preventDefault();
        }).text('+');

        that.find(".children").hide();
    }

    that.children("a").prepend( item );
});

这为我的类别构建了一个很好的切换菜单。

然而,我想要它做的是根据我当前正在查看的类别显示当用户登陆页面时要打开的相应菜单。 这需要适用于帖子和类别。

感谢。

2 个答案:

答案 0 :(得分:0)

把它放在你的代码之后:

jQuery('#categories .current-cat span.plus:first').click();

模拟点击当前类别中的第一个plus符号。

如果您想要扩展整个树,只需省略:first

jQuery('#categories .current-cat span.plus').click();

顺便说一下菜单没有崩溃,因为我尝试过,我不得不将你的代码更改为that.children("ul").hide();

<强>更新

如果.current-cat位于子树中的li元素上,则可以执行以下操作:

jQuery('#categories .current-cat').parents('li:not(#categories)')
                                  .andSelf()
                                  .find('span.plus:first').click();

这会找到每个父li,包括当前liandSelf(),如果它再次是子树的根)并点击第一个+符号在每一个中。

答案 1 :(得分:0)

让Wordpress将类别名称插入父容器中的ID(比如BODY标记),然后为打开相应菜单的每个类别/ ID对编写CSS。