0

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

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

4

2 回答 2

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>
于 2012-11-01T12:47:17.277 回答
0

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
});
于 2012-11-01T12:47:41.273 回答