你看过debugging javascript代码？当你拉小提琴时，它会显示出一堆错误。

例如

Uncaught ReferenceError: openDisplay is not defined
at HTMLButtonElement.onclick ((index):181)

还有这一个，一旦你修复了上面的一个

Uncaught TypeError: document.getElementsById is not a function
at openDisplay ((index):164)

这是因为没有名为getElementsById的函数，因为所有元素都应该只有唯一的id。所以应该是这样getElementById

Jquery当然是一个更好的主意（对我来说），因为Jquery选择器易于使用。

    /* Click Handlers */
$(\'#menu-aquo\').on(\'click\', function(e) {
  e.preventDefault();
  openDisplay(e, \'aquo\');
});

$(\'#menu-categories\').on(\'click\', function(e) {
  e.preventDefault();
  openDisplay(e, \'categories\');

});

$(\'#menu-involve\').on(\'click\', function(e) {
  e.preventDefault();
  openDisplay(e, \'involve\');
});

$(\'#menu-search\').on(\'click\', function(e) {
  e.preventDefault();
  openDisplay(e, \'search\');
});

function openDisplay(evt, tabName) {
  //Declare all variables
  var i, target, menutab, submenu;

  // Remove \'active\' class from all menutabs
  $(\'.menutab\').removeClass("active");
  // Add active to the current menutab
  evt.currentTarget.classList.toggle("active");

  target = "div." + tabName;

  // Select all except currently clicked submenu and hide them
  toHide = $(\'.submenu:not(.\' + tabName + \'.hidden)\')
    .each(function() {

      if (!$(this).hasClass(tabName)) {
        $(this).addClass("hidden");
      }

    });
    //Select all current submenu and hide or show them
  submenu = $(target)
    .each(function() {
      if ($(this).hasClass("hidden")) {
        $(this).removeClass("hidden");
      } else {
        $(this).addClass("hidden");
      }

    });

}

Here is a working jquery JsFiddle with comments.

还有我的两分钱：我会把菜单安排得稍微不同一点。

例如，而不是

<div id="submenu">
  <div class="submenu aquo " id="sub-aquo">
    <p>some text with one <a>link</a></p>
  </div>
  <div class="submenu categories hidden" id="zebrology">
    <img src="<?php echo get_template_directory_uri(); ?>/img/zebra.png" />Zebrology
  </div>
  <div class="submenu categories hidden" id="clips">
    <img src="<?php echo get_template_directory_uri(); ?>/img/clip.png" />Clips
  </div>
</div>

我会将每个子菜单分别放在div 所以我把hidden 在主要方面。

实例

<div id="submenu">
    <div class="aquo hidden">
       <div class="submenu" id="sub-aquo">
          <p>some text with one <a>link</a></p>
       </div>
    </div>
    <div class="categories hidden">
       <div class="submenu" id="zebrology">
          <img src="<?php echo get_template_directory_uri(); ?>/img/zebra.png" />Zebrology
       </div>
       <div class="submenu" id="clips">
           <img src="<?php echo get_template_directory_uri(); ?>/img/clip.png" />Clips
      </div>
    </div>
</div>

但每个程序员都有自己的风格。所以没什么大不了的。

至于WordPress，它已经提供了一种构建和组织菜单的简单方法。你所要做的就是修改css，使它看起来像你想要的样子。

检查手动设置WordPress菜单样式的方法2this 辅导的

基本上WordPress向菜单添加了一些类，您可以使用这些类修改菜单的外观。

// container class
#header .primary-menu{} 

// container class first unordered list
#header .primary-menu ul {} 

//unordered list within an unordered list
#header .primary-menu ul ul {} 

 // each navigation item
#header .primary-menu li {}

// each navigation item anchor
#header .primary-menu li a {} 

// unordered list if there is drop down items
#header .primary-menu li ul {} 

// each drop down navigation item
#header .primary-menu li li {} 

// each drap down navigation item anchor
#header .primary-menu li li a {}