javascript - 引导下拉菜单 jQuery 与其他库冲突？

Question

我在我的网站上安装了一些 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>

我怎样才能将它们两者结合起来？

谢谢

=======更新=========================================== ==========

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

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

一切正常......

多谢你们！

Answer 1

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

<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 链接（这使下拉菜单恢复工作），所以我知道它们存在冲突。

根据上面提供的源 URL，您的标记中有类似的内容：

<!-- 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 2

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

您有一个名为 asdtest 的文件夹，其中包含一个索引文件，该文件正在测试下拉悬停的初始化，然后您调用 dropdown() 删除它，就像这样。

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

文档说您可以使用 javascript 或 data-attributes 来使其工作，因此选择一种方法，现在您正在尝试两种方法。

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

Answer 3

请参阅控制台错误

删除此代码，您的下拉菜单将正常工作。

---

您是否包括twitter-bootstrap-hover-dropdown 的插件文件

---

如果你想显示菜单hover

见小提琴演示