在单击外部时关闭 Wordpress 主题下划线下拉菜单答案

【问题标题】：Make Wordpress theme Underscores dropdown menu close when clicking outside of it在单击外部时关闭 Wordpress 主题下划线下拉菜单
【发布时间】：2017-06-08 22:33:58
【问题描述】：

我正在使用 WordPress 入门主题下划线，可以通过单击“菜单”按钮打开和关闭下拉菜单。不过，当我单击页面上的其他位置时，我也希望它关闭，而且我一生都无法弄清楚如何做到这一点。 :(

我尝试过类似的东西：

$(document).click(function(){
  $(".toggled").hide();
});

但这不起作用。

这是navigation.js 文件：

( function() {
var container, button, menu, links, subMenus, i, len;

container = document.getElementById( 'site-navigation' );
if ( ! container ) {
    return;
}

button = container.getElementsByTagName( 'button' )[0];
if ( 'undefined' === typeof button ) {
    return;
}

menu = container.getElementsByTagName( 'ul' )[0];

// Hide menu toggle button if menu is empty and return early.
if ( 'undefined' === typeof menu ) {
    button.style.display = 'none';
    return;
}

menu.setAttribute( 'aria-expanded', 'false' );
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
    menu.className += ' nav-menu';
}

button.onclick = function() {
    if ( -1 !== container.className.indexOf( 'toggled' ) ) {
        container.className = container.className.replace( ' toggled', '' );
        button.setAttribute( 'aria-expanded', 'false' );
        menu.setAttribute( 'aria-expanded', 'false' );
    } else {
        container.className += ' toggled';
        button.setAttribute( 'aria-expanded', 'true' );
        menu.setAttribute( 'aria-expanded', 'true' );
    }
};

// Get all the link elements within the menu.
links    = menu.getElementsByTagName( 'a' );
subMenus = menu.getElementsByTagName( 'ul' );

// Set menu items with submenus to aria-haspopup="true".
for ( i = 0, len = subMenus.length; i < len; i++ ) {
    subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
}

// Each time a menu link is focused or blurred, toggle focus.
for ( i = 0, len = links.length; i < len; i++ ) {
    links[i].addEventListener( 'focus', toggleFocus, true );
    links[i].addEventListener( 'blur', toggleFocus, true );
}

/**
 * Sets or removes .focus class on an element.
 */
function toggleFocus() {
    var self = this;

    // Move up through the ancestors of the current link until we hit .nav-menu.
    while ( -1 === self.className.indexOf( 'nav-menu' ) ) {

        // On li elements toggle the class .focus.
        if ( 'li' === self.tagName.toLowerCase() ) {
            if ( -1 !== self.className.indexOf( 'focus' ) ) {
                self.className = self.className.replace( ' focus', '' );
            } else {
                self.className += ' focus';
            }
        }

        self = self.parentElement;
    }
}
} )();

【问题讨论】：

标签： javascript css wordpress drop-down-menu underscores-wp

【解决方案1】：

假设ul 有 .toggled 类，下面应该这样做

$(document).on("click", "body" function(){
  $('.toggled').not(':hidden').toggle();
});

【讨论】：

感谢您的建议！实际上是nav 具有.toggled 类。如果我添加您的代码，下拉菜单按钮将不再起作用。

【解决方案2】：

这是我遇到同样问题时使用的东西：

它还会检查你是否点击它来取消事件。

$(document).click(function() {
    $(".dropdown-content").hide();
    // $(".dropdown-content").removeClass("show");
});

$(".dropdown-content").click(function(e) {
    e.stopPropagation(); // if you click on the div itself it will cancel the click event.
});

【讨论】：