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

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

我想和你结合。这就是它变得复杂的地方

我有饮料口味作为在线目录展示。我希望能够按分区（即咖啡、食物、糖、茶）过滤这些内容，因此我使用gallery插件进行过滤。在画廊的演示页面上，不需要照片中的超级模特，只需想象产品各部分的标题图片

我想改变的是，当你点击一张图片时，会发生什么。我不想点击图片来查看更大的lightbox版本（使用prettypto），而是想完全消除prettypto，并使用javascript菜单在照片下方下拉以显示纯文本的口味列表。如果用户再次单击图像，菜单将返回到照片并消失

有没有一种方法可以在每个图像元素中隐藏我的手风琴菜单，并且仍然能够过滤所有动画的结果，并且没有任何问题？点击图像，菜单会在周围图像的上方显示味道？（我不希望所有内容都处于相对位置，因为下拉菜单会将所有内容都显示出来，除非我将结果保持垂直且不在网格布局中。）

---

提前谢谢你的帮助。这一个真的让我很难受，因为我没有教程或支持继续进行。

我没有使用quicksand插件，但是你想要的下拉式手风琴效果应该独立于图库的过滤功能。（再说一次，没有用过，我不能肯定）

首先，我将删除手风琴菜单的代码库，并创建您自己的下拉功能。在检查了gallery页面的dom之后，我要做的是创建一个div元素，作为图像上锚标记之后的下一个同级元素，并将其显示设置为none。将jquery切换事件添加到锚元素，然后将slideDown/slideUp功能添加到切换事件。（或者，将slideToggle方法切换到click事件（代码更少）也会执行相同的操作）。如果不希望同时打开多个下拉菜单，请使用单击事件隐藏所有下拉菜单，然后显示当前下拉菜单

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

如果将隐藏div添加到li元素会干扰过滤器功能，那么可以尝试为每个图像创建一个json对象，其中包含相应的slidedown数据，并使用函数将数据注入动态创建的div元素中

*编辑：我第一次读的时候一定错过了，但你是什么意思：“在图像上单击菜单会在周围图像的上方显示味道？”

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

*编辑2：回答你的问题

$('a.somelink').toggle(function() {
    $(this).next().slideDown(200);
}, function() {
    $(this).next().slideUp(200);
});

或

如果您不介意一次打开多个下拉列表，这两个选项都可以，但如果您一次只需要打开一个下拉列表，请尝试以下方法：

$('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>

内容在下拉列表中

---

即使先单击“筛选”按钮，此布局也不应更改，下面是每个

在公文包中的外观

    <li class="item" data-id="id-1" data-type="hannah">
        <a href="#"><img src="images/hannah_yg_thumb.jpg" width="210" height="130" alt="Yulia Gorbachenko, Hannah 1" /></a>
        <div class="drop">International<br />Regional<br />International<br />
        </div>
    </li>

---

（很抱歉用“答案”回答，但我无法格式化代码。）

你的意思是这样吗？你对一切都很在行。这是一张我想象的图像。如何将jquery切换事件添加到anchor元素中？好吧，我正在尝试实现您的javascript，但我发现与缩略图集成的方式存在问题。链接实际上只是一个图像。它看起来是这样的：

那么我应该用什么来代替a.somelink
？我是否要完全删除pretto部分并在缩略图照片周围环绕一个链接，然后使用该路径？顺便说一句，这是缩略图网格左上角的第一个
元素供参考。您可以将$（'a.somelink'）替换为$（'li.item a'）。对不起，我应该让我的示例反映您的标记。是的，我认为你想要的是删除所有的Pretto插件的痕迹？您仍然需要将包含下拉内容的添加到标记中，作为包装图像缩略图的锚定标记的直接同级。您还没有删除对PrettyTo的调用…另外，我在想，如果可能的话，可以通过电子邮件向我发送您的代码吗？我是说你一直在做的代码。
    <li class="item" data-id="id-1" data-type="hannah">
        <a href="#"><img src="images/hannah_yg_thumb.jpg" width="210" height="130" alt="Yulia Gorbachenko, Hannah 1" /></a>
        <div class="drop">International<br />Regional<br />International<br />
        </div>
    </li>

$(document).ready(function(){

    // Blur images on mouse over
    $(".portfolio a").hover( function(){ 
        $(this).children("img").animate({ opacity: 0.75 }, "fast"); 
    }, function(){ 
        $(this).children("img").animate({ opacity: 1.0 }, "slow"); 
    }); 


    // Clone portfolio items to get a second collection for Quicksand plugin
    var $portfolioClone = $(".portfolio").clone();

    // Attempt to call Quicksand on every click event handler
    $(".filter a").click(function(e){

        $(".filter li").removeClass("current"); 

        // Get the class attribute value of the clicked link
        var $filterClass = $(this).parent().attr("class");

        if ( $filterClass == "all" ) {
            var $filteredPortfolio = $portfolioClone.find("li");
        } else {
            var $filteredPortfolio = $portfolioClone.find("li[data-type~=" + $filterClass + "]");
        }

        // Call quicksand
        $(".portfolio").quicksand( $filteredPortfolio, { 
            duration: 800, 
            easing: 'easeInOutQuad' 
        }, function(){

            // Blur newly cloned portfolio items on mouse over and apply prettyPhoto
            $(".portfolio a").hover( function(){ 
                $(this).children("img").animate({ opacity: 0.75 }, "fast"); 
            }, function(){ 
                $(this).children("img").animate({ opacity: 1.0 }, "slow"); 
            }); 

            $(".portfolio a[rel^='prettyPhoto']").prettyPhoto({
                theme:'light_square', 
                autoplay_slideshow: false, 
                overlay_gallery: false, 
                show_title: false
            });
        });


        $(this).parent().addClass("current");

        // Prevent the browser jump to the link anchor
        e.preventDefault();
    })
});