0

如果我单击画廊中的缩略图，我正在使用 jquery 和 ajax 创建一个抽屉（#DrawerContainer）并将内容加载到其中。我的功能几乎完成了，但如果我再次单击打开按钮（现在是#current），我希望能够关闭那个抽屉。

这是我的代码的 jsfiddle：http: //jsfiddle.net/RF6df/54/
如果单击正方形/缩略图，则会出现抽屉元素，它是蓝色矩形。当前缩略图变为绿色。

我在抽屉中添加了一个按钮（在 jsfiddle 中不可见）来关闭它。我为此目的使用这部分代码，它就像一个魅力。

      // Close the drawer
        $(".CloseDrawer").click(function() {
            $('#DrawerContainer').slideUp()
                setTimeout(function(){ // then remove it...
                    $('#DrawerContainer').remove();
                }, 300); // after 500ms.
            return false;
        });

现在我需要我的#currentdiv 能够以与上面代码#DrawerContainer中相同的方式关闭.CloseDrawer。
不幸的是，向我的函数添加这样的第二个触发器$("#current,.CloseDrawer").click(function()不起作用......当点击我的“当前”缩略图时，它只是重新打开抽屉而不是关闭它......

如何修改我的代码以使用“当前”缩略图关闭我的#DrawerContainer？

请记住，我正在学习 jquery，所以如果你能发表评论，它可能会有很大的帮助。并且请不要修改我的标记或 css，因为一切都在结束部分旁边工作。

4

1 回答 1

0

根据我的理解，您可以使用完全相同的“toggle()”函数（即切换可见性）。

$('#DrawerContainer').toggle();

编辑： 更新脚本工作。

$(document).ready(function() {

    $.ajaxSetup({cache: false});

    $('#portfolio-list>div:not(#DrawerContainer)').click(function() {
        if ($(this).attr("id") != "current")
        {
    // modify hash for sharing purpose (remove the first part of the href)
    var pathname = $(this).find('a')[0].href.split('/'),
            l = pathname.length;
        pathname = pathname[l-1] || pathname[l-2];
        window.location.hash = "#!" + pathname;

    $('#current').removeAttr('id');
    $(this).attr('id', 'current');

    // find first item in next row
    var LastInRow = -1;
    var top = $(this).offset().top;
    if ($(this).next().length == 0 || $(this).next().offset().top != top) {
        LastInRow = $(this);
    }
    else {
        $(this).nextAll().each(function() {
            if ($(this).offset().top != top) {
                return false; // == break from .each()            
            }
            LastInRow = $(this);
        });
    }
    if (LastInRow === -1) {
        LastInRow = $(this).parent().children().last();
    }

    // Ajout du drawer
    var post_link = $(this).find('.mosaic-backdrop').attr("href");
        $('#DrawerContainer').remove(); // remove existing, if any
        $('<div/>').attr('id', 'DrawerContainer').css({display: 'none'}).data('citem', this).html("loading...").load(post_link + " #container > * ").insertAfter(LastInRow).slideDown(300);
        return false; // stops the browser when content is loaded
    }
    else {
          $('#DrawerContainer').slideUp(300);   
         $(this).removeAttr("id");
    }

   });

    $(document).ajaxSuccess(function() {

        Cufon('h1'); //refresh cufon

        // Toggle/close the drawer
        $("#current,.CloseDrawer").click(function() {
            $('#DrawerContainer').slideToggle()
                setTimeout(function(){ // then remove it...
                    $('#DrawerContainer').remove();
                }, 300); // after 500ms.
            return false;
        });

    });

    //updated Ene's version
    var hash = window.location.hash;
    if ( hash.length > 0 ) {
        hash = hash.replace('#!' , '' , hash );
        $('a[href$="'+hash+'/"]').trigger('click');
    }

});

另外，在这里更新它：更新的 JS Fiddle

编辑-2： 更新链接

希望这可以帮助！！

于 2012-11-13T18:53:37.030 回答