Question

我正在使用Underscores主题开发一个WordPress网站，目前，我的导航栏在大屏幕上工作，如图所示：

但是当我点击具有子菜单的菜单项时，我发现小屏幕出现问题。它没有手风琴。

如何将手风琴应用到我的子菜单，以便当我点击例如，子菜单将作为手风琴下拉，这样我仍然可以看到菜单的其余部分？

这是我目前的CSS：

@media(max-width: 600px){
  ul#primary-menu li {
    width: 100%;
  }
}
.menu-main-menu-container {
    max-width: 1280px;
    margin: auto;
}
li#menu-item-65 > a:after {
    font-family: FontAwesome;
    content: '\f107';
    padding-left: 10px;
    color: #99c71b;
}
li#menu-item-66 > a:after {
    font-family: FontAwesome;
    content: '\f107';
    padding-left: 10px;
    color: #99c71b;
}
.main-navigation {   
    clear: both;
    display: block;
    float: left;
    width: 100%;
    background-color: #353535;
    border-bottom: 5px solid #99c71b;
}
.main-navigation ul {
    display: none;
    list-style: none;
    margin: 0;  
}
ul#primary-menu > li {
    border-top: 3px solid;
    padding-bottom: 3px;
}
ul#primary-menu > li:hover{
    border-top: 3px solid #99c71b;
}
.main-navigation li {
    float: left;
    position: relative;
}
.main-navigation a {
    display: block;
    text-decoration: none;
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    padding: 15px;
}
.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: left;
    position: absolute;
    top: 3.5em;
    left: -999em;
    z-index: 99999;
}
.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}
.main-navigation ul ul a {
    width: 200px;
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
    left: auto;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    left: 100%;
}
/* submemunu*/
ul.sub-menu {
    background-color: #cecece;
}
ul.sub-menu a {
    padding: 0 !important;
}
ul.sub-menu a:hover {
    border-top: 0px solid transparent;
}
ul.sub-menu li:first-child {
/*    padding-top: 10px;*/
}
ul.sub-menu li {
    margin-left: -33px !important;
}
ul.sub-menu a:hover {
    color: #fff;
}
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
    display: block;
}

@media screen and (min-width: 37.5em) {
    .menu-toggle {
            display: none;
    }
    .main-navigation ul {
            display: block;
    }
}

和javascript：

( 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;
    }
  }
    /**
 * Toggles `focus` class to allow submenu access on tablets.
 */
( function( container ) {
    var touchStartFn, i,
        parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );

    if ( 'ontouchstart' in window ) {
        touchStartFn = function( e ) {
            var menuItem = this.parentNode, i;

            if ( ! menuItem.classList.contains( 'focus' ) ) {
                e.preventDefault();
                for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
                    if ( menuItem === menuItem.parentNode.children[i] ) {
                        continue;
                    }
                    menuItem.parentNode.children[i].classList.remove( 'focus' );
                }
                menuItem.classList.add( 'focus' );
            } else {
                menuItem.classList.remove( 'focus' );
            }
        };

        for ( i = 0; i < parentLink.length; ++i ) {
            parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
        }
    }
  }( container ) );
} )( jQuery );

希望得到一些帮助。提前致谢

Answer 1

我已经在下划线中使用了这个用于移动菜单始终打开的情况，但在您的情况下它可能会有所帮助。

(function($) {

$('#site-navigation ul li ul').hide(); //Hide children by default

$('#site-navigation ul').children().click(function(){
    $(this).children('#site-navigation ul li ul').slideToggle('400');     
}).children('#site-navigation ul li ul').click(function (event) {
    event.stopPropagation();
});

})( jQuery );

仅当主菜单项不是链接本身时才有效（否则它只是点击进入主菜单项）。我没有将它插入到Underscores现有的navigation.js文件中。我在js文件夹中给它自己的文件，在主题的函数中给出了相应的wp_enqueue_script。

如何将手风琴应用于子菜单

1 个答案: