Question

我正在使用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;
    }
}
} )();

Answer 1

假设ul具有.toggled类，则以下应该执行此操作

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

Answer 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.
});

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

2 个答案: