如何在 wordpress 菜单中使用 jquery?
how to use jquery in wordpress menu?
我正在创建一个 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
项目都会受到影响和移动!
我该如何指定?
您可以通过 class 说明符缩小范围来指定悬停项的子菜单。在悬停事件回调中,您可以获得悬停项 DOM 对象作为 this
,因此您将拥有 .sub-menu
作为其兄弟对象。然后,您在该子菜单上做一些事情。
$( ".menu-item a" ).hover(
function()
{
$( this ).siblings( ".sub-menu" )
.animate( { "right": "300px" } );
}
);
在 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();
});
这将使子菜单在单击时打开,但会在您将鼠标移开后关闭它们
我正在创建一个 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
项目都会受到影响和移动!
我该如何指定?
您可以通过 class 说明符缩小范围来指定悬停项的子菜单。在悬停事件回调中,您可以获得悬停项 DOM 对象作为 this
,因此您将拥有 .sub-menu
作为其兄弟对象。然后,您在该子菜单上做一些事情。
$( ".menu-item a" ).hover(
function()
{
$( this ).siblings( ".sub-menu" )
.animate( { "right": "300px" } );
}
);
在 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();
});
这将使子菜单在单击时打开,但会在您将鼠标移开后关闭它们