点击显示子导航点击

我有默认的wordpress菜单，它显示悬停的子导航链接，但我只想在用户单击父链接时显示子导航。你可以在这里看到我的菜单https://jsfiddle.net/foley13/83sk1p1x/点击显示子导航点击

我有一个JavaScript应该做到这一点，但不工作。

$(function(){ 
    //Hide all the sub menus 
    $('.sub-menu').hide(); 

    $("li:has(ul)").click(function(){ 
     //Find the child ul and slideToggle 
     $(this).children("ul").slideToggle('fast'); 
     $(this).toggleClass("down"); 
    }); 
});

我不知道CSS是否阻止这项工作，但我只是想删除悬停，只是点击。

来源

2017-06-21 Duggy G

你有麻烦李：has（ul）。只需添加班级“下拉”到这些有下拉的李。 ;）

来源

2017-06-21 09:29:25

下面是对我的作品的代码，我的jsfiddle打开的jQuery：

https://jsfiddle.net/83sk1p1x/2/

(function(){ 
    //Hide all the sub menus 

    $('li.menu-item-has-children').hover(function(){ 
    $('li.menu-item-has-children').children("ul.sub-menu").css({"display":"none"}); 
    return; 
    }); 

    $("li.menu-item-has-children").click(function(e){ 
     e.preventDefault(); 
     //Find the child ul and slideToggle 
     $(this).children("ul").slideToggle('fast'); 
     $(this).toggleClass("down"); 
    }); 
})();

然而，在WordPress（由于其问题与jQuery的$），你将有以这种方式编写函数：

(function($){ ... 
    // code 
}(jQuery);

来源

2017-06-21 09:32:14

试试这个

脚本

$(function(){ 
    $("li:has(ul)").click(function(){ 
     $(this).toggleClass("hover"); 
    }); 
});

而且在css你需要.hover Check working fiddle

来源

2017-06-21 09:36:37 Manoj

这很好，我已经书签为将来的参考。 –

三江源更换:hover对您有所帮助，但我设法仍然有我的原始脚本来解决我的问题：

$(function(){ 
    //Hide all the sub menus 
    $('.sub-menu').hide(); 

    $("li:has(ul)").click(function(){ 
     //Find the child ul and slideToggle 
     $(this).children("ul").slideToggle('fast'); 
     $(this).toggleClass("down"); 
    }); 
});

但我删除了左边：-999em;从.sub菜单和.sub菜单ul，这解决了悬停问题

来源

2017-06-21 10:57:25

点击显示子导航点击

回答

相关问题