0

我正在尝试为运行 WordPress 的博客使用下拉菜单;我想做的是为我的类别设置子菜单。所以它应该看起来像这样:http ://d.pr/i/jj0I - 确实如此.. 但它在页面加载时也看起来像这样 - 这不是我想要的。一般来说,如果我不使用 WordPress,这将是一个简单的解决方案,因为我可以将以下内容添加到我的 HTML 中。

没有 WordPress 的 HTML 菜单:

<ul class="dropdown">
    <li>Link 1</li>
    <li>Link 2</li>
    <li>
        <ul style="visibility: hidden;">
            <li>Sub menu - Link 1</li>
            <li>Sub menu - Link 2</li>
        </ul>
    </li>
    <li>Link 4</li>
</ul>

带有 WordPress 的 HTML 菜单

<ul class="dropdown" style="visibility: hidden;">
    <?php wp_list_categories('title_li='); ?>
</ul>

我想要用 WordPress 做的是能够在我的子菜单上使用'style="visibility: hidden;"' 。如果我重写 wp_list_categories 是可能的,但我需要通过主题检查,所以我不能这样做。因此,如果在页面加载时不使用'style="visibility: hidden;"',子菜单会自动显示而无需悬停。

我的 jQuery:

jQuery(文档).ready(函数($){

jQuery("ul.dropdown li").hover(function() {
    $('ul:first',this).css('visibility', 'visible');
}, function() {
    jQuery(this).removeClass("hover");
    jQuery('ul:first',this).css('visibility', 'hidden');
    });
});

如果有帮助,您可以在以下位置实时查看下拉菜单:http ://wpvault.com/kahlam-test/

如果我遗漏了任何内容,我很抱歉,如果我有我会尽我所能快速添加它。

4

3 回答 3

2
.dropdown .children{
    visibility:hidden;
}
于 2012-09-28T22:22:44.817 回答
1

在页面加载时隐藏你的 ul..

$(function() {
   $('ul.dropdown li > ul').hide();
   // Your Code here
});
于 2012-09-28T22:24:37.740 回答
0

为什么不使用菜单创建屏幕并以这种方式创建菜单?

您可以使用 WP 菜单创建器创建分层菜单,并且 html 应该与您要查找的内容大致相同。

于 2012-09-28T22:23:00.090 回答