Fatal编程技术网
  • javascript/
  • Javascript 在同一页面上使用两个相同的jQuery插件（Kwicks）

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

javascript jquery

Javascript 在同一页面上使用两个相同的jQuery插件（Kwicks）,javascript,jquery,kwicks,Javascript,Jquery,Kwicks,我在一个网站上使用jQuery插件“Kwicks”，但有一些冲突。该插件在导航方面运行良好，但我想在页面顶部为社交媒体使用一个单独的、较小的nav（仍然使用Kwicks）做同样的事情。我已经尝试了像我这样的新手所能做的一切，但仍然无法让第二个Kwicks导航正常工作 以下是网站：首先，将您的javascript文件包含到页面的标题部分，并且只需要一次 <head> <script src='js/jquery-1.8.1.min.js' type='text/javascri

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

以下是网站：

首先，将您的javascript文件包含到页面的标题部分，并且只需要一次

<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（unique）



$（文档）.ready（函数（）{
$（'#menu1'）.kwicks({
尺码：125，
最大尺寸：250，
间距：2，
行为：“菜单”，
放松：“放松反弹”，
是的
});
$（'#menu2'）.kwicks({
尺码：125，
最大尺寸：250，
间距：2，
行为：“菜单”，
放松：“放松弹跳”
});
});
jsiddle:

欢迎来到堆栈溢出。你能把相关的JS代码复制到你上面的问题中吗？注释它，指出哪些有效，哪些无效，以及您认为它失败的原因。快速浏览您的页面源代码会发现您包含了所有
标记两次。每个函数只应调用一次。当您可以在一个这样的语句中执行所有的就绪代码时，您有两个
$（document）.ready（）
块。那么我应该调用所有行，以及第一个出现的div中的$（document）.ready（）吗？将
标记（包括一个
$（document）.ready（）
放在
标记中。它们不需要靠近使用它们的div。如果它们的参数都相同，它们可以放在一个选择器中：
$（'#menu1，#menu2'）。kwicks（{……}）成功！非常感谢你，克里斯蒂安。你帮了大忙

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



$('.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
});