В верхней части моего 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, у меня есть этот код, начиная с Аккордеона div для моего слайдера
<div id="accordion" style="padding:5px;">
<h4><a onclick="document.getElementById('accordion').style.margin='-30px 0 0 0'"></a></h4>
Итак, под этим аккордеонным div все мое содержание, что в аккордеоне, оно отлично работает! Однако, когда я пытаюсь создать второй аккордеон div позже в моем файле HTML, который не работает.
Мой вопрос: как я могу использовать эффект аккордеона несколько раз на моем веб-сайте?
Идентификаторы в DOM должны быть уникальными. Мне кажется, что вы пытаетесь создать несколько DIV с одинаковым идентификатором ("аккордеон").
Если вы хотите иметь более одного, вы должны использовать параметр класса.
Поэтому используйте $(".accordion")
вместо $("#accordion")
и <div class="accordion" style="padding:5px;">
вместо <div id="accordion" style="padding:5px;">
Убедитесь, что селектор в вашем коде будет ссылаться на оба элемента аккордеона:
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:
onclick="document.getElementById('accordion2').style.margin='-30px 0 0
Попробуй это:
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()
каждый раз, когда вам это нужно.
id
на втором аккордеоне, который является недействительной разметкой.wizard = $("#accordion").accordion({...
строкиwizard = $("#accordion").accordion({...
инициализировалwizard = $("#accordion").accordion({...
для элемента с идентификатором'accordian'
. Идентификаторы элемента должны быть уникальными. Чтобы использовать несколько элементов, ссылайтесь на них по имени класса или перечислите идентификаторы ,