Bootstrap下拉菜单jQuery与其他库冲突？

Question

我在my website上安装了一些jQuery组件，一个Bootstrap下拉菜单，一个横幅滑块和一个内容滑块。

目前，当横幅滑块和时，下拉菜单不起作用。内容滑块工作正常。 我试图从内容滑块（这使得下拉菜单恢复工作）禁用jQuery链接，所以我知道它们是冲突的。

下拉菜单jQuery位于此处：

<script src="http://www.helpmyedu.com/wp-content/themes/parallelus-moxie/assets/js/jquery.js"></script>

内容滑块jQuery位于此处：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

我如何将它们合并两个？

由于

======= UPDATE ======================================= =============

我出于某种原因删除了该行：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

一切都有效......

谢谢你们！

Answer 1

请参阅控制台错误

删除此代码，您的下拉列表即可正常运行。

<小时/> 你是否包括Plugin file of twitter-bootstrap-hover-dropdown

---

如果您想在hover

上显示菜单

请参阅Fiddle DEMO

Answer 2

我认为你不需要调用相同的脚本。

<script src="http://www.helpmyedu.com/wp-content/themes/parallelus-moxie/assets/js/jquery.js"></script>
/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery-1.10.2.min.map
*/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
/*! jQuery v1.10.2 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery.min.map
*/

它们有不同的来源，但都是jQuery v1.10.2。只需使用一个并将其放在您正在使用的其他JavaScript上。

注意：我的回答基于：

  

目前，当横幅滑块和时，下拉菜单不起作用。内容滑块工作正常。我试图从内容滑块（这使得下拉菜单恢复工作）禁用jQuery链接，所以我知道它们是冲突的。

根据您在上面提供的源网址，您的标记中包含以下内容：

<!-- jQuery #1 --><script src="http://www.helpmyedu.com/wp-content/themes/parallelus-moxie/assets/js/jquery.js"></script>
<script src="http://www.helpmyedu.com/wp-content/themes/parallelus-moxie/assets/js/twitter-bootstrap-hover-dropdown.js"></script>
<script>
// very simple to use!
$(document).ready(function() {
  $('.js-activated').dropdownHover().dropdown();
});
</script>

<!-- CSS Embedded Here.. -->

<!-- jQuery #2 --><script type='text/javascript' src='http://www.helpmyedu.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-content/plugins/alligator-popup/js/popup.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-content/plugins/iphorm-form-builder/js/iphorm.js?ver=1.4.4'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-includes/js/swfupload/swfupload.js?ver=2201-20110113'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-includes/js/swfobject.js?ver=2.2-20120417'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-includes/js/swfupload/plugins/swfupload.swfobject.js?ver=2201a'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-includes/js/swfupload/plugins/swfupload.queue.js?ver=2201'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.plugins.min.js?ver=3.7.1'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=3.7.1'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-content/themes/parallelus-moxie/assets/js/modernizr-2.6.2-respond-1.1.0.min.js?ver=2.6.2'></script>

我认为您必须删除 jQuery＃1 并将其他2个脚本与下面的其他脚本一起移动，如下所示：

<!-- CSS Embedded Here.. -->

<!-- jQuery #2 --><script type='text/javascript' src='http://www.helpmyedu.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script>
<script src="http://www.helpmyedu.com/wp-content/themes/parallelus-moxie/assets/js/twitter-bootstrap-hover-dropdown.js"></script>
<script>
// very simple to use!
$(document).ready(function() {
  $('.js-activated').dropdownHover().dropdown();
});
</script>

<script type='text/javascript' src='http://www.helpmyedu.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-content/plugins/alligator-popup/js/popup.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-content/plugins/iphorm-form-builder/js/iphorm.js?ver=1.4.4'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-includes/js/swfupload/swfupload.js?ver=2201-20110113'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-includes/js/swfobject.js?ver=2.2-20120417'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-includes/js/swfupload/plugins/swfupload.swfobject.js?ver=2201a'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-includes/js/swfupload/plugins/swfupload.queue.js?ver=2201'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.plugins.min.js?ver=3.7.1'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=3.7.1'></script>
<script type='text/javascript' src='http://www.helpmyedu.com/wp-content/themes/parallelus-moxie/assets/js/modernizr-2.6.2-respond-1.1.0.min.js?ver=2.6.2'></script>

Answer 3

问题是您的资源未在初始页面加载时正确加载，这就是您的下拉菜单无效的原因。我有一段时间没有制作Wordpress主题。但是，如果你要在wordpress中使用主题，那么主题的所有内容应该主要位于“content / themes /”主题名称中。“

你有一个名为asdtest的文件夹，它有一个索引文件正在测试初始化​​下拉悬停然后你正在调用dropdown（）删除它就像这样。

$('.js-activated').dropdownHover();

文档说您可以使用javascript或数据属性来使其工作，因此选择一种方法，现在您正在尝试这两种方法。

我试图指出它，但我认为你的问题在于wordpress主题文件夹的结构以及该索引页面最初是如何使用的。试着环顾四周，看看是什么阻止了你的资源加载，我觉得你可能会很好。