下拉菜单上点击jquery

我一直在与this thread。但我没有代表问他们这个问题。下拉菜单上点击jquery

我有这样的设置在一个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'); 
    }); 
});

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

来源

2015-10-13 KL Piazza

只是一个想法 - 你尝试过使用'.on（'click'，function（）{...}）;'而不是？我知道'.click（）'可能会遇到动态插入元素的问题，尽管这可能不是您所看到的问题。 – joshfarrant

您的代码可以工作，请参阅** [小提琴]（https://jsfiddle.net/n0x5xssk/43/）**。 –

谢谢。穆罕默德Alsaedi答案工作。显然与Wordpress如何处理jQuery有关。见下文。 –

在许多情况下，您需要使用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'); 
    }); 
});

无论是哪种应该解决你的问题，考虑到代码的作品，它似乎基于Zakari做的a的Fiddle的评论。

干杯！

来源

2015-10-13 21:25:59

令人惊叹。完美工作。谢谢。 –

下拉菜单上点击jquery

回答

相关问题