Question

我一直在与this thread合作。但我没有让代表问他们这个问题。

我在Wordpress安装中使用Wordpress吐出的默认菜单层次结构进行此设置，如下所示：

HTML：

<div class="menu-featured-categories-container">
<ul id="menu-featured-categories">
    <li class="menu-item-has-children">
      <a href="#">Featured Categories</a>
        <ul class="sub-menu">
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
</ul>
</div>

CSS：

#menu-featured-categories ul.sub-menu {
    display: none;
}

#menu-featured-categories ul.visible {
    display: block;
}

jQuery的：

$(document).ready(function() {
    $('.menu-item-has-children').click(function() {
        $('.sub-menu').toggleClass('visible');
    });
});

它不适合我。所以我的问题是：我做错了什么？任何想法将不胜感激。感谢。

Answer 1

在许多情况下，您需要使用noConflict模式在Wordpress中编写jQuery。或者，您可以在所有实例中使用'jQuery'而不是$。

所以这里有你的选择，要么更换包装

$(document).ready(function(){
});

与

jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
});

您的第二个选择是重写您的代码，如下所示：

jQuery(document).ready(function() {
    jQuery('.menu-item-has-children').click(function() {
        jQuery('.sub-menu').toggleClass('visible');
    });
});

考虑到代码是有效的，其中任何一个都应解决您的问题，它似乎是根据评论中的Zakaria Fiddle进行的。

干杯！

用jquery点击下拉菜单

1 个答案: