jQuery和Wordpress链接不起作用

Question

Got a problem with my WordPress menu. After I insert the jquery my links (in the menu and in sidebars won't work. What to do? Thank you!

My code:

HTML

<ul class="menu">
  <li class="menu-item">
   <a href="#">Link text</a>
     <ul class="sub-menu">
       <li><a>Text</a></li>
       <li><a>Text</a></li>
       <li><a>Text</a></li>
     </ul>
  </li>
</ul>

jQuery

$(document).ready(function(){ 
  $('li.menu-item').each(function() {
    var $dropdown = $(this);
    $($dropdown).click(".menu-item a", function(e) {
      e.preventDefault();
      $ul = $("ul.sub-menu", $dropdown);
      $('ul.sub-menu').toggle();
      $("ul.sub-menu").not($ul).hide();
      return false;
    });

});

  $('html').click(function(){
    $("ul.sub-menu").hide();
  });

});

Answer 1

请通过替换以下脚本来解决此问题

<li class="menu-item> to <li class="menu-item">

Answer 2

There might be a problem with the event propagation. If a link within a sub-menu is clicked the click event propagates to the surrounding menu-item and triggers your JS code.

Please try to add this code to prevent the propagation effect:

$( "ul.sub-menu a" ).click(function( event ) {
  event.stopPropagation();
});