如何在 wordpress 菜单中使用 jquery？

Question

我正在创建一个 wp 主题，我将此代码用于菜单：

<?php
$defaults = array(
'theme_location'  => '',
'menu'            => '',
'container'       => 'div',
'container_class' => '',
'container_id'    => '',
'menu_class'      => 'menu',
'menu_id'         => '',
'echo'            => true,
'fallback_cb'     => 'wp_page_menu',
'before'          => '',
'after'           => '',
'link_before'     => '',
'link_after'      => '',
'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth'           => 0,
'walker'          => '');  wp_nav_menu( $defaults );?>

输出 Html 代码是这样的：

<div class="menu-%d9%81%d9%87%d8%b1%d8%b3%d8%aa-%db%b1-container">
  <ul id="menu-%d9%81%d9%87%d8%b1%d8%b3%d8%aa-%db%b1" class="menu">
    <li id="menu-item-12"
    class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-12">

      <a href="http://localhost/soheil/">Home</a>
    </li>
    <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-14">
      <a href="http://localhost/soheil/?page_id=10">
        <span>M item1</span>
      </a>
      <ul class="sub-menu">
        <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13">
          <a href="http://localhost/soheil/?page_id=2">ch item 2</a>
        </li>
        <li id="menu-item-98" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-98">
          <a href="http://localhost/soheil/?page_id=89">ch item 3</a>
        </li>
      </ul>
    </li>
    <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99">
      <a href="http://localhost/soheil/?page_id=2">
        <span>ch item 4</span>
      </a>
    </li>
    <li id="menu-item-100"
    class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-100">
      <a href="http://localhost/soheil/?page_id=89">ch item 5</a>
      <ul class="sub-menu">
        <li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103">
          <a href="http://localhost/soheil/?page_id=72">ch item 6</a>
        </li>
        <li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104">
          <a href="http://localhost/soheil/?page_id=27">ch item 7</a>
        </li>
      </ul>
    </li>
    <li id="menu-item-105"
    class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-105">
      <a href="http://localhost/soheil/?page_id=26">ch item 8</a>
      <ul class="sub-menu">
        <li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106">
          <a href="http://localhost/soheil/?page_id=25">
            <span>ch item 9</span>
          </a>
        </li>
        <li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107">
          <a href="http://localhost/soheil/?page_id=24">
            <span>ch item 10</span>
          </a>
        </li>
        <li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108">
          <a href="http://localhost/soheil/?page_id=21">
            <span>ch item 11</span>
          </a>
        </li>
        <li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-109">
          <a href="http://localhost/soheil/?page_id=10">
            <span>ch item 12</span>
          </a>
        </li>
        <li id="menu-item-110" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-110">
          <a href="http://localhost/soheil/?page_id=2">
            <span>ch item 13</span>
          </a>
        </li>
      </ul>
    </li>
  </ul>
</div>

现在我想创建一种菜单，如果用户单击某个类别，将打开该类别的列表 ID 子菜单！为此，我使用此 jquery 代码：

 $(document).ready(function(){
    $("ul li").hover(function(){
      $("ul li > ul li").animate({right: '300px'}); 
 });});

（不完全是这段代码）但问题是当我悬停一个项目时，所有 ul li ul li 项目都会受到影响和移动！我该如何指定？

Answer 1

您可以通过 class 说明符缩小范围来指定悬停项的子菜单。在悬停事件回调中，您可以获得悬停项 DOM 对象作为 this，因此您将拥有 .sub-menu 作为其兄弟对象。然后，您在该子菜单上做一些事情。

$( ".menu-item a" ).hover(
    function()
    {
        $( this ).siblings( ".sub-menu" )
                 .animate( { "right": "300px" } );
    }
);

Answer 2

在 WP 中，我认为与菜单交互的最佳方式是使用它的本机类，它就是为此目的而设计的！

例如。如果你想在悬停时显示特定项目的子菜单，只需使用以下内容：

$('.menu-item-has-children').on('mouseover',function(){
    $(this).children('.sub-menu').show();
}).on('mouseleave',function(){
    $(this).children('.sub-menu').hide();
});

这是工作 fiddle

编辑用户请求：

   $('.menu-item-has-children').on('click',function(){
        $(this).children('.sub-menu').show();
       return false;
    }).on('mouseleave',function(){
        $(this).children('.sub-menu').hide();
    });

这将使子菜单在单击时打开，但会在您将鼠标移开后关闭它们

如何在 wordpress 菜单中使用 jquery？

how to use jquery in wordpress menu?

jquery

html

wordpress

menu

menuitem