Question

我在网站上使用jQuery插件'Kwicks'并且存在一些冲突。插件在导航方面工作正常，但我想为单独的较小导航（仍然使用Kwicks）做同样的事情社交媒体位于页面顶部。我已经尝试了一些新手，比如我自己可以做但仍然无法使第二个Kwicks导航功能。

以下是网站：http://www.webexplosive.com/accu1

Answer 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标签一个像menu1和menu2这样的id属性（唯一）

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

Answer 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
});

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

2 个答案: