如何在 wordpress 菜单中使用 jquery？

Posted 2023-03-05

【中文标题】如何在 wordpress 菜单中使用 jquery？

【英文标题】：how to use jquery in wordpress menu?

【发布时间】：2015-04-15 10:33:13

【问题描述】：

我正在创建一个 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 项目都是影响和移动！ 如何指定？

【参考方案1】：

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

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

【参考方案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();
    );

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

【讨论】：

谢谢你，你知道我该如何应用这个功能：我希望用户点击母亲项目时，它不会起作用！你知道我只想当用户点击母亲项目时，列表就会被打开！它不会是一个链接

非常感谢您的帮助，非常感谢您的帮助 :)