更改wordpress下拉菜单以单击而不是悬停

时间:2014-11-10 12:43:16

标签: jquery html css wordpress

我正在尝试将wordpress菜单更改为onclick,从悬停下拉菜单。我希望在点击我的项目时看到菜单,但是wordpress在悬停时会看到。这是我到目前为止所尝试的代码,但它不起作用。

Jquery的:

$(".header_menu_res ul li").live("click",function() {
    if($(this).find(".adv_categories").length==1) {
        if($(this).find(".adv_categories").is(":visible")) {
            $(this).find(".adv_categories").removeClass('importantRule');
            $(this).parent("ul").find(".sub-menu").removeClass('importantRule');
        } else {
            $(this).find(".adv_categories").addClass('importantRule');
        }
    } 
});

HTML

<div class="header_menu_res">
<ul id="menu-header"><li class="menu-item"><a class="primary" href="http://localhost/?page_id=7">Categories</a>
<div class="adv_categories" id="adv_categories"><ul class="maincat-list"><li class="maincat cat-item-8"><a href="http://localhost/?ad_cat=acs-consultants" title="">ACS Consultants</a>  </li>
<li class="maincat cat-item-9"><a href="http://localhost/?ad_cat=business-development" title="">Business Development</a> </li></ul>
</div></li></ul>
</div>

CSS

.importantRule { display:block !important; }

每次点击Categories,页面都会滚动到顶部?

1 个答案:

答案 0 :(得分:1)

http://jsfiddle.net/kkpLhzqj/1/

看我的小提琴。实际上它真的很容易:

 $(".header_menu_res ul > .menu-item").click(function() {
    $('.maincat-list').toggle("slow");
 });

旧版本的jsfiddle无法使用多个下拉列表,这个版本可以:

http://jsfiddle.net/kkpLhzqj/2/