Question

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

我想将this Javascript accordion menu与this filtered photo gallery plugin合并。这就是它变得复杂的地方。

我有饮料口味作为在线目录展示。我希望能够通过除法（即咖啡，食物，糖，茶）过滤这些，所以我使用过滤器的图库插件。在画廊的演示页面上，而不是照片中的超级名模，只需想象每个产品部分的标题图像。

当您点击图片时，我现在想要改变的是什么。我没有点击图片来查看更大的灯箱版本（使用PrettyPhoto），而是想完全消除PrettyPhoto并使用javascript菜单下拉到照片下方以显示纯文本列表。如果用户再次点击图像，菜单将重新回到照片中并消失。

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

提前感谢您的所有帮助。这个真的让我难过，因为我没有任何教程或支持继续下去。

Answer 1

嗯我没有使用流沙插件，但你想要的下拉手风琴效果应该独立于画廊的滤镜功能。（再次，没有使用它，我不能说肯定）

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

每个li元素必须具有相对位置（没有任何顶部，左侧，底部，右侧属性），并且每个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;
});

* new编辑：您的li元素应如下所示：

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

即使单击过滤器按钮

，此布局也不应更改

Answer 2

首先，这是每个<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>

然后是图库插件附带的.js。

$(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();
    })
});

（很抱歉在“回答”中回答，但我无法格式化代码..）

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

2 个答案: