0

サイトで jQuery プラグイン 'Kwicks' を使用していて、競合が発生しています。プラグインはナビゲーションで正常に動作していますが、ソーシャル メディア用の別の小さなナビゲーション (まだ Kwicks を使用) で同じことをしたいと考えています。ページの上部。私のような初心者ができることはすべて試しましたが、それでも 2 つ目の Kwicks ナビを機能させることができません。

ここにサイトがあります: http://www.webexplosive.com/accu1

4

2 に答える 2

1

まず最初に、JavaScript ファイルをページの head セクションに含めます。必要なのは 1 回だけです。

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

次に、メニューへの参照は同じであるため、プラグインは混乱し、1 つしか取得できません (プラグインがセレクターを処理する方法によって異なります)。

したがって、問題を解決するには、ul タグに menu1 や menu2 (unique) などの 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>
于 2012-11-01T12:47:17.277 に答える
0

jsFiddle: http://jsfiddle.net/jphelemons/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 に答える