javascript - 将 Javascript Accordion 菜单效果与 jQuery 可过滤照片库相结合

Question

我为一个网站创建了一个 ui 概念，该网站需要结合两种不同的代码源，但我真的不知道如何将它们正确地组合在一起，因为我对 javascript 不是很流利。

我要结合this Javascript accordion menu与 this filtered photo gallery plugin .这就是事情变得复杂的地方。

我有饮料口味要显示为在线目录。我希望能够按部门过滤这些(即咖啡、食物、糖、茶)，所以我使用画廊插件作为过滤器。在画廊的演示页面上，想象每个产品部分的标题图片，而不是照片中的超模。

当你点击一张图片时，现在发生的事情就是我想要改变的。我不想单击图像以查看更大的灯箱版本(使用 PrettyPhoto)，而是想完全消除 PrettyPhoto 并使用 javascript 菜单在照片下方下拉以显示纯文本口味列表。如果用户再次单击图像，菜单将向上摆回到照片中并消失。

有没有一种方法可以在每个图像元素中隐藏我的 Accordion 菜单，并且仍然能够使用所有动画过滤结果并且没有故障？在图像上单击菜单会在周围图像之上显示 flavor ？ (我不希望所有内容都相对定位，因为下拉菜单会打乱所有内容，除非我保持结果垂直而不是网格布局。)

提前感谢您的所有帮助。这真的让我很困惑，因为我没有教程或支持可以继续。

Answer 1

嗯，我没有使用过流沙插件，但是你想要的下拉 Accordion 效果应该独立于画廊的过滤器功能。 (同样，没有使用过它，我不能肯定地说)

首先，我将删除 Accordion 菜单的代码库并创建您自己的下拉功能。在检查图库页面的 dom 之后，我要做的是创建一个 div 元素作为图像上 anchor 标记之后的下一个同级元素，并将其显示设置为无。将 jquery 切换事件添加到 anchor 元素，然后将 slideDown/slideUp 功能添加到切换事件。 (或点击事件的 slideToggle 方法，更少的代码，做同样的事情)。如果您不想同时打开多个下拉菜单，请使用点击事件隐藏所有下拉菜单，然后显示当前下拉菜单。

每个 li 元素都必须有一个相对位置(没有任何 top、left、bottom、right 属性也可以)，每个 div 元素都有一个绝对位置。把它想象成一个下拉导航菜单。

如果将隐藏的 div 添加到 li 元素会影响过滤器功能，您可以尝试为每个图像创建一个 json 对象及其相应的下拉数据，并使用一个函数将数据注入(inject)动态创建的 div 元素。

*编辑:我第一次阅读时一定错过了它，但你是什么意思:“并且在图像上单击菜单将在周围图像之上显示 flavor ？”

我以为您希望口味列表显示在下拉菜单中图像下方。你是说你想让口味出现在下方的下拉列表中，同时覆盖页面上的其他图像吗？

*编辑 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;
});

*新编辑:您的 li 元素应如下所示:

<li class="item">
   <a href="#"><img src="thumbnail.jpg" /></a>
   <div class="drop_down_content">Content in Drop down</div>
</li>

即使点击过滤器按钮，这个布局也不应该改变