悬停在 wordpress 菜单中单击

Question

我使用了一个我更改为水平显示子菜单的主题，现在我想在单击而不是悬停时显示子菜单，我不擅长 javascript，但我认为这段代码是关于导航菜单的：

var nav = {
    init: function() {

        // Add parent class to items with sub-menus
        jQuery("ul.sub-menu").parent().addClass('parent');

        var menuTop = 40;
        var menuTopReset = 80;

        // Enable hover dropdowns for window size above tablet width
        jQuery("nav").find(".menu li.parent").hoverIntent({
            over: function() {
                if (jQuery('#container').width() > 767 || jQuery('body').hasClass('responsive-fixed')) {

                    // Setup menuLeft variable, with main menu value
                    var subMenuWidth = jQuery(this).find('ul.sub-menu').first().outerWidth(true);
                    var mainMenuItemWidth = jQuery(this).outerWidth(true);
                    var menuLeft = '-' + (Math.round(subMenuWidth / 2) - Math.round(mainMenuItemWidth / 2)) + 'px';
                    var menuContainer = jQuery(this).parent().parent();

                    // Check if this is the top bar menu                            
                    if (menuContainer.hasClass("top-menu")) {
                        if (menuContainer.parent().parent().parent().hasClass("top-bar-menu-right")) {
                        menuLeft = "";
                        } else {
                        menuLeft = "-1px";
                        }
                        menuTop = 30;
                        menuTopReset = 40;
                    } else if (menuContainer.hasClass("header-menu")) {
                        menuLeft = "-1px";
                        menuTop = 28;
                        menuTopReset = 40;
                    } else if (menuContainer.hasClass("mini-menu") || menuContainer.parent().hasClass("mini-menu")) {
                        menuTop = 40;
                        menuTopReset = 58;
                    } else {
                        menuTop = 44;
                        menuTopReset = 64;
                    }

                    // Check if second level dropdown
                    if (jQuery(this).find('ul.sub-menu').first().parent().parent().hasClass("sub-menu")) {
                        menuLeft = jQuery(this).find('ul.sub-menu').first().parent().parent().outerWidth(true) - 2;
                    }

                    jQuery(this).find('ul.sub-menu').first().addClass('show-dropdown').css('top', menuTop);
                }
            },
            out:function() {
                if (jQuery('#container').width() > 767 || jQuery('body').hasClass('responsive-fixed')) {
                    jQuery(this).find('ul.sub-menu').first().removeClass('show-dropdown').css('top', menuTopReset);
                }
            }
        });

        jQuery(".shopping-bag-item").live("mouseenter", function() {

            var subMenuTop = 44;

            if (jQuery(this).parent().parent().hasClass("mini-menu")) {
                subMenuTop = 40;
            }

            jQuery(this).find('ul.sub-menu').first().addClass('show-dropdown').css('top', subMenuTop);
        }).live("mouseleave", function() {
            if (jQuery('#container').width() > 767 || jQuery('body').hasClass('responsive-fixed')) {
                jQuery(this).find('ul.sub-menu').first().removeClass('show-dropdown').css('top', 64);
            }
        });

        // Toggle Mobile Nav show/hide          
        jQuery('a.show-main-nav').on('click', function(e) {
            e.preventDefault();
            if (jQuery('#main-navigation').is(':visible')) {
            jQuery('.header-overlay .header-wrap').css('position', '');
            } else {
            jQuery('.header-overlay .header-wrap').css('position', 'relative');
            }
            jQuery('#main-navigation').toggle();
        });

        jQuery(window).smartresize(function(){  
            if (jQuery('#container').width() > 767 || jQuery('body').hasClass('responsive-fixed')) {
                var menus = jQuery('nav').find('ul.menu');
                menus.each(function() {
                    jQuery(this).css("display", "");
                });
            }
        });

        // Set current language to top bar item
        var currentLanguage = jQuery('li.aux-languages').find('.current-language span').text();
        if (currentLanguage !== "") {
            jQuery('li.aux-languages > a').text(currentLanguage);
        }

    },
    hideNav: function(subnav) {
        setTimeout(function() {
            if (subnav.css("opacity") === "0") {
                subnav.css("display", "none");
            }
        }, 300);
    }
};

我尝试将“hoverIntent”替换为“click”，但不起作用，我该怎么办？

Answer 1

当某人当前悬停时会发生什么，它在悬停时做一件事，当他们离开时它必须类似于cleanup，这是hoverintent 中的两个函数，即over 和out 所以代码需要分成两个事件监听器，一个用于元素的click，一个用于blur

我已将两个侦听器链接到初始选择器，所以它应该都能正常工作。

    var nav = {
        init: function() {

            // Add parent class to items with sub-menus
            jQuery("ul.sub-menu").parent().addClass('parent');

            var menuTop = 40;
            var menuTopReset = 80;

            // Enable click dropdowns for window size above tablet width
jQuery("nav").find(".menu li.parent").on('click', function (event) {
    if($(event.target).parent().hasClass('menu-item-has-children')){
     event.preventDefault();
    };
    if (jQuery('#container').width() > 767 || jQuery('body').hasClass('responsive-fixed')) {
        // Setup menuLeft variable, with main menu value
        var subMenuWidth = jQuery(this).find('ul.sub-menu').first().outerWidth(true);
        var mainMenuItemWidth = jQuery(this).outerWidth(true);
        var menuLeft = '-' + (Math.round(subMenuWidth / 2) - Math.round(mainMenuItemWidth / 2)) + 'px';
        var menuContainer = jQuery(this).parent().parent();

        // Check if this is the top bar menu                            
        if (menuContainer.hasClass("top-menu")) {
            if (menuContainer.parent().parent().parent().hasClass("top-bar-menu-right")) {
                menuLeft = "";
            } else {
                menuLeft = "-1px";
            }
            menuTop = 30;
            menuTopReset = 40;
        } else if (menuContainer.hasClass("header-menu")) {
            menuLeft = "-1px";
            menuTop = 28;
            menuTopReset = 40;
        } else if (menuContainer.hasClass("mini-menu") || menuContainer.parent().hasClass("mini-menu")) {
            menuTop = 40;
            menuTopReset = 58;
        } else {
            menuTop = 44;
            menuTopReset = 64;
        }

        // Check if second level dropdown
        if (jQuery(this).find('ul.sub-menu').first().parent().parent().hasClass("sub-menu")) {
            menuLeft = jQuery(this).find('ul.sub-menu').first().parent().parent().outerWidth(true) - 2;
        }

        jQuery(this).find('ul.sub-menu').first().addClass('show-dropdown').css('top', menuTop);
    }
}).on('mouseleave',function () {
    if (jQuery('#container').width() > 767 || jQuery('body').hasClass('responsive-fixed')) {
        jQuery(this).find('ul.sub-menu').first().removeClass('show-dropdown').css('top', menuTopReset);
    }
});     
            // Toggle Mobile Nav show/hide          
            jQuery('a.show-main-nav').on('click', function(e) {
                e.preventDefault();
                if (jQuery('#main-navigation').is(':visible')) {
                jQuery('.header-overlay .header-wrap').css('position', '');
                } else {
                jQuery('.header-overlay .header-wrap').css('position', 'relative');
                }
                jQuery('#main-navigation').toggle();
            });

            jQuery(window).smartresize(function(){  
                if (jQuery('#container').width() > 767 || jQuery('body').hasClass('responsive-fixed')) {
                    var menus = jQuery('nav').find('ul.menu');
                    menus.each(function() {
                        jQuery(this).css("display", "");
                    });
                }
            });

            // Set current language to top bar item
            var currentLanguage = jQuery('li.aux-languages').find('.current-language span').text();
            if (currentLanguage !== "") {
                jQuery('li.aux-languages > a').text(currentLanguage);
            }

        },
        hideNav: function(subnav) {
            setTimeout(function() {
                if (subnav.css("opacity") === "0") {
                    subnav.css("display", "none");
                }
            }, 300);
        }
    };

Answer 2

这似乎过于复杂。有现场版的链接吗？

通常，当使用可点击的父级进行点击查看子菜单时，我会设置一个变量来查看菜单是否打开，如果没有就不要链接。如果是，请转到链接。

一个例子：http://codepen.io/jhealey5/pen/iLgom

    var $handle = $('.sub-menu').prev();

    var opened = 0;
    $handle.on('click', function(e){

      if (opened) {
        window.location.href = $(this).attr('href');
      } else {
        e.preventDefault();
        e.stopPropagation();
        $('.sub-menu').slideToggle();
        opened = 1;
      }
    });

    $('html').on('click', function(){
      if (opened) {
        $('.sub-menu').slideToggle();
        opened = 0;
      }
    });

根据您的菜单，您可以使用类似的菜单。但它在菜单上使用了很多代码。