Question

我正在使用Wordpress网站，该网站有一个子菜单，我需要在点击某个“li”时打开，并在再次点击时关闭。我已经尝试了几个jQuery函数，但没有任何工作。

我还在wp_enqueue_script文件中包含了functions.php函数，我知道引用的脚本正在工作，因为我在我创建的jQuery文件中添加了一个简单的警报函数，它可以工作。

以下是菜单的HTML：

<nav id="access" class="clearfix">
    <div class="container clearfix">
      <ul class="root">

         <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-19">
         <a href="example.com/">my name</a></li>

         <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-17">
         <a href="example.com/?page_id=10">film</a>
             <ul class="sub-menu">
                  <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">
                  <a href="example.com/?page_id=42">calvin klein film</a></li>
                  <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22">
                  <a href="example.com/?page_id=20">cam’ron</a></li>
               .
               .
               .
             </ul>

           </li>
      </ul>
    </div><!-- .container -->
</nav>

因此，当点击menu-item-17时，我需要显示子菜单类，然后在另一次点击时消失。

我尝试过这样的功能而没有运气：

jQuery("#menu-item-17").click(function () {
$(".sub-menu").toggle("slow");
});

如果有帮助，这就是我在functions.php文件中添加的内容：

function attitude_child_scripts() {
wp_enqueue_script('toggle js', get_stylesheet_directory_uri() . '/js/toggle.js');
}
add_action('wp_enqueue_scripts', 'attitude_child_scripts');

我做错了什么？这是Wordpress特有的吗？提前谢谢！

Answer 1

我在你的javscript中发现的问题是你正试图切换它的可见性子菜单类，但＃menu-item-17 li包含一个链接。默认情况下，链接将导航到其href属性中包含的url。要防止链接执行其默认行为，您必须将javascript更改为以下代码：jsfiddle example - ＆gt; http://jsfiddle.net/larryjoelane/206duwnt/

Javascript代码：

 /* 
jQuery document ready function call below is used passing $ as a parameter in order to avoid any conflicts with other Jquery Libraries loaded that might use the $ in its library
*/


jQuery(document).ready(function($){//begin document ready wrapper function to allow the use of the $

 //hide .sub-menu element on page load
 $(".sub-menu").hide();

/*
Adding e as a function parameter, e is as a variable that holds the event object. Child selector plus a added so that the preventDefault
only affects links that are a direct child of #menu-item-17.
*/
    $("#menu-item-17 > a").click(function(e){//begin click event

    /* 
    The code was added below because if you click on the #menu-item-17
    li element it contains a link which will navigate by default.
    */
    e.preventDefault();


$(".sub-menu").toggle("slow");

});//end click event

});//end document ready wrapper function

如果您想将链接保留在＃menu-item-17 li元素中，您可以放置另一个元素在li旁边，以便用户可以单击新元素以切换可见性。这可能是一些纯文本或图像。您还可以将链接一起移动到另一个li元素。如果您进行了任何这些更改，那么您可能希望删除e.preventDefault（）函数调用，以便＃menu-item-17 li元素中的链接将再次导航到另一个页面。

用于在Wordpress上切换菜单的jQuery无法正常工作

1 个答案: