Ну, я не использовал плагин quicksand, но нужный вам эффект аккордеона не должен зависеть от функциональности фильтра галереи. (опять же, не используя его, я не могу сказать точно)
Сначала я бы бросил базу кода для аккордеонного меню и создал бы свою собственную выпадающую функциональность. После проверки dom на странице галереи я бы создал элемент div в качестве следующего элемента после метки привязки на изображении, установив для него значение «Нет». Добавьте событие переключения jquery к элементу привязки, а затем добавьте функциональность slideDown / slideUp к событию переключения. (или метод slideToggle для события click, за исключением кода, делает то же самое). Если вы не хотите, чтобы одновременно открывалось более одного раскрывающегося меню, используйте событие щелчка, чтобы скрыть все раскрывающиеся списки, а затем показать текущий раскрывающийся список.
Каждый элемент li должен иметь относительную позицию (что прекрасно без каких-либо свойств top, left, bottom, right), и каждый элемент div будет иметь абсолютную позицию. Думайте об этом как о выпадающем меню навигации.
Если добавление скрытого элемента div к элементу li нарушает функциональность фильтра, вы можете попробовать создать объект json для каждого изображения с соответствующими данными слайд-апа и использовать функцию для вставки данных в динамически создаваемый элемент div.
* РЕДАКТИРОВАТЬ: Должно быть, я пропустил его при первом прочтении, но что вы имеете в виду: "И при нажатии на изображение в меню будут отображаться ароматы поверх окружающих изображений?"
Я думал, вы хотели, чтобы список вкусов появился под изображением в выпадающем меню. Вы хотите сказать, что хотите, чтобы ароматы отображались в раскрывающемся списке внизу и одновременно покрывали другие изображения на странице?
* Редактировать 2: Чтобы ответить на ваш вопрос ..
$('a.somelink').toggle(function() {
$(this).next().slideDown(200);
}, function() {
$(this).next().slideUp(200);
});
Или
$('a.somelink').click(function() {
$(this).next().slideToggle(200);
return false;
});
Эти два подойдут, если вы не возражаете против одновременного открытия более одного раскрывающегося списка, но если вам нужен только один открытый за раз, попробуйте следующее:
$('a.somelink').click(function() {
if ($(this).hasClass('active') == true ) {
$(this).next().slideUp(200);
$('a').removeClass('active');
} else {
$('a.somelink').removeClass('active');
$('.sub_div').slideUp(200);
$(this).addClass('active').next().slideDown(200);
}
return false;
});
* new Edit: ваши элементы li должны выглядеть так:
<li class="item">
<a href="#"><img src="thumbnail.jpg" /></a>
<div class="drop_down_content">Content in Drop down</div>
</li>
Этот макет не должен меняться даже после нажатия кнопки фильтра