将 Javascript 手风琴菜单效果与 jQuery 可过滤照片库相结合

Question

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

我想将this Javascript accordion menu 与this filtered photo gallery plugin 结合起来。这就是复杂的地方。

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

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

有没有办法在每个图像元素中隐藏我的手风琴菜单，并且仍然能够过滤所有动画且没有故障的结果？在图像上单击菜单会在周围图像的顶部显示风味吗？ （我不希望所有内容都相对定位，因为下拉菜单会影响所有内容，除非我保持结果垂直而不是网格布局。）

提前感谢您的所有帮助。这个真的难倒我，因为我没有教程或支持继续。

Answer 1

好吧，我没有使用流沙插件，但是您想要的下拉手风琴效果应该独立于画廊的过滤器功能。 （再次，没有使用过，我不能肯定地说）

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

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

如果向 li 元素添加隐藏的 div 与过滤器功能相混淆，您可以尝试为每个图像创建一个 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;
});

*新编辑：你的 li 元素应该是这样的：

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

即使单击过滤器按钮，此布局也不应更改