在同一页面上使用两个相同的 jQuery 插件（Kwicks）答案

【问题标题】：Using two of the same jQuery plugin (Kwicks) on the same page在同一页面上使用两个相同的 jQuery 插件（Kwicks）
【发布时间】：2012-11-01 12:36:18
【问题描述】：

我在一个网站上使用 jQuery 插件“Kwicks”并且有一些冲突。该插件在导航上工作得很好，但我想为一个单独的、更小的导航（仍在使用 Kwicks）做同样的事情页面顶部的社交媒体。我已经尝试了像我这样的新手可以做的所有事情，但仍然无法让第二个 Kwicks nav 发挥作用。

这里是网站：http://www.webexplosive.com/accu1

【问题讨论】：

欢迎来到 Stack Overflow。您可以将相关的 JS 代码复制到上面的问题中，而不是发布指向您网站的链接吗？评论它，说明哪些有效，哪些无效，以及您认为它失败的原因。
快速浏览一下您的页面源代码会发现您将所有<script> 标签包含了两次。每个都应该只调用一次。当您可以在一个这样的语句中执行所有准备好的代码时，您就有两个 $(document).ready() 块。
那么我应该调用所有的
将<script> 标签包括$(document).ready() 放入<head> 标签。它们不需要位于使用它们的 div 附近。

标签： javascript jquery kwicks

【解决方案1】：

首先将您的 javascript 文件包含在页面的 head 部分中，并且只需要一次。

<head>
 <script src='js/jquery-1.8.1.min.js' type='text/javascript'></script>
 <script src='js/jquery.easing.1.3.js' type='text/javascript'></script>
 <script src='js/jquery.kwicks.js' type='text/javascript'></script>
</head>

第二个你引用的菜单是一样的，所以插件会混淆，只会得到一个（取决于插件如何处理选择器）

所以要解决这个问题，给你的 ul 标签一个 id 属性，如 menu1 和 menu2（唯一）

<ul class='kwicks1 kwicks-vertical' id='menu1'>
    ...
</ul>
<ul class='kwicks kwicks-horizontal' id='menu2'>
   ...
</ul>

<script>
$(document).ready(function () {
    $('#menu1').kwicks({
        size: 125,
        maxSize: 250,
        spacing: 2,
        behavior: 'menu',
            easing: 'easeOutBounce',
            isVertical: true
    });
    $('#menu2').kwicks({
                size: 125,
                maxSize : 250,
                spacing : 2,
                behavior: 'menu' ,
                easing: 'easeOutBounce'
            });
});
</script>

【讨论】：

如果所有参数都相同，则可以进入单个选择器：$('#menu1, #menu2').kwicks({....});
成功！非常感谢你，克里斯蒂安。您提供的不仅仅是帮助

【解决方案2】：

jsFiddle：http://jsfiddle.net/jphellemons/CXu4n/

$('.kwicks-horizontal').kwicks({
    size: 125,
    maxSize : 250,
    spacing : 2,
    behavior: 'menu' ,
    easing: 'easeOutBounce' ,
    isVertical: false
});
$('.kwicks-vertical').kwicks({
    size: 200,
    maxSize : 300,
    spacing : 1,
    behavior: 'menu' ,
    easing: 'easeOutBounce' ,
    isVertical: true
});

【讨论】：