Question

我在这里搜索了几个问题以找到我的问题的答案，但没有答案与我的问题/问题相关。这是我的有线问题，是的，有线，现在知道为什么 -

我打算在我的一个客户端项目中使用来自jQuery UI的原生/默认手风琴 - http://jqueryui.com/accordion/。以下所有必要的代码在独立模板中运行良好但是当我完成所有代码并尝试将这些代码集成到我的项目中时，所有与手风琴相关的代码都停止了工作。

以下是我使用的确切代码 -

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Accordion</title>
    <link rel="stylesheet" href="css/jquery-ui.min.css">
</head>
<body>

    <div id="faqs">
        <h3>What is your name?</h3>
        <div>
            <p>My name is bla bla bla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dolorem nobis quibusdam rerum saepe? Asperiores dicta expedita molestiae natus nostrum.</p>
        </div>
        <h3>What is your name?</h3>
        <div>
            <p>My name is bla bla bla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dolorem nobis quibusdam rerum saepe? Asperiores dicta expedita molestiae natus nostrum.</p>
        </div>
        <h3>What is your name?</h3>
        <div>
            <p>My name is bla bla bla. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dolorem nobis quibusdam rerum saepe? Asperiores dicta expedita molestiae natus nostrum.</p>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/plugins.js"></script>
</body>
</html>

我已将所有必要的CSS和JS文件添加到css，js目录中，并将accordion()函数调用到单独的plugins.js文件中，如下所示 -

//Initialize FAQ Accordion
$(document).ready(function () {
    $('#faqs').accordion({
        fillSpace: true,
        heightStyle: 'content',
        icons: {
            'header': 'ui-icon-circle-arrow-e',
            'headerSelected': 'ui-icon-circle-arrow-s',
        },
        event: 'mouseover',
        collapsible: true,
        active: false,
    });
});

关于独立模板的全部内容，但在我完成项目并集成这些代码的地方，HTML代码没有任何问题，但jQuery使我的工作很难找到。这是我初始化的所有其他jQuery插件 -

// Avoid `console` errors in browsers that lack a console.
(function() {
    var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});

    while (length--) {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method]) {
            console[method] = noop;
        }
    }
}());

// Place any jQuery/helper plugins in here.

//Home page blog post slider
$(document).ready(function() {
    $("#promo-slider").owlCarousel({
        autoPlay: 3000,
        responsive: true,
        items : 5,
        itemsDesktop : [1199,5],
        itemsDesktopSmall : [979,2],
        itemsTablet : [768,2],
        itemsMobile: [479,1],
    });
});

// Sidebar Nav Initialization
$(document).ready(function() {
    $(".sidebar-nav").accordion({
        accordion:true,
        speed: 500,
        closedSign: '[+]',
        openedSign: '[-]'
    });
});


//Initialize tooltip plugin
$(".social li a").tooltip();

//Initialize FAQ Accordion
$(document).ready(function () {
    $('#faqs').accordion({
        fillSpace: true,
        heightStyle: 'content',
        icons: {
            'header': 'ui-icon-circle-arrow-e',
            'headerSelected': 'ui-icon-circle-arrow-s'
        },
        collapsible: true,
        active: false
    });
});

实时网页链接是 - http://baherbazar.com/html/faq.php

我检查了JS / jQuery脚本的冲突时未能弄清楚问题，但没有找到。

我的代码中发现了什么问题吗？

Answer 1

我认为文件http://baherbazar.com/html/js/menu.js会覆盖您的插件＆＃39;轮播＆＃39;。如果你给它一个不同的名字，这可能会解决你的问题。

命名空间/前缀插件有助于防止出现这些问题。

jQuery手风琴输出

1 个答案: