Question

在我的HTML文档之上，我有手风琴滑块的JavaScript代码。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" >
    var gCurrentIndex = 0; // global variable to keep the current index;
    var ACCORDION_PANEL_COUNT = 3; //global variable for panel count. Here 3 is for zero based accordion index

    $(document).ready(function () {
            wizard = $("#accordion").accordion({
                                event: 'click',
                                active: 9,
                                autoheight: true,
                                animated: "bounceslide",
                                icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' },
                                change: function (event, ui) { gCurrentIndex = $(this).find("h4").index(ui.newHeader[0]); }
    });

    //Bind event for previous and next buttons
    $('.previous,.next').click(function () {
            var index = 0;
            if ($(this).hasClass('next')) {
                    index = gCurrentIndex + 1;
                    if (index > ACCORDION_PANEL_COUNT ) {
                            index = ACCORDION_PANEL_COUNT;
                    }
            }
            else {
                    index = gCurrentIndex - 1;
                    if (index < 0) {
                           index = 0;
                    }
            }

    //Call accordion method to set the active panel
      wizard.accordion("activate", index);
    });
});

然后继续我的HTML文件，我有这个代码，开始我的滑块的Accordion div

<div id="accordion" style="padding:5px;">
        <h4><a onclick="document.getElementById('accordion').style.margin='-30px 0 0 0'"></a></h4>

所以低于这个，在手风琴div里面是我在手风琴中的所有内容，它很棒！但是，当我尝试在我的HTML文件中创建第二个手风琴div时，其中一个不起作用。

我的问题：如何在我的网站上多次使用手风琴效果？

Answer 1

试试这个：

function accordionDiv(){
        var gCurrentIndex = 0; // global variable to keep the current index;
        var ACCORDION_PANEL_COUNT = 3; //global variable for panel count. Here 3 is for zero based accordion index

        $(document).ready(function () {
                wizard = $("#accordion").accordion({
                                    event: 'click',
                                    active: 9,
                                    autoheight: true,
                                    animated: "bounceslide",
                                    icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' },
                                    change: function (event, ui) { gCurrentIndex = $(this).find("h4").index(ui.newHeader[0]); }
        });

        //Bind event for previous and next buttons
        $('.previous,.next').click(function () {
                var index = 0;
                if ($(this).hasClass('next')) {
                        index = gCurrentIndex + 1;
                        if (index > ACCORDION_PANEL_COUNT ) {
                                index = ACCORDION_PANEL_COUNT;
                        }
                }
                else {
                        index = gCurrentIndex - 1;
                        if (index < 0) {
                               index = 0;
                        }
                }

        //Call accordion method to set the active panel
          wizard.accordion("activate", index);
        });
    });
}

每次需要时调用accordionDiv()函数。

Answer 2

确保代码中的选择器引用两个手风琴元素：

            wizard = $("#accordion,#accordion2").accordion({ //selector looks at both div IDs
                            event: 'click',
                            active: 9,
                            autoheight: true,
                            animated: "bounceslide",
                            icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' },
                            change: function (event, ui) { gCurrentIndex = $(this).find("h4").index(ui.newHeader[0]); }

同时将第二个DIV的onclick代码点更改为新的div ID：

onclick="document.getElementById('accordion2').style.margin='-30px 0 0

Answer 3

DOM中的ID应该是唯一的。在我看来，你正在尝试创建具有相同id（'accordion'）的几个DIV。

如果您想拥有多个，则应使用class参数。

因此请使用$(".accordion")代替$("#accordion")

和<div class="accordion" style="padding:5px;">代替<div id="accordion" style="padding:5px;">

无法使用JavaScript（函数）两次

3 个答案: