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

上記のコードと同じ方法#currentでdivを閉じることができるようにする必要があります。残念ながら、このような2番目のトリガーを関数に追加しても機能しません...「現在の」サムネイルをクリックすると、ドロワーを閉じるのではなく、再度開くだけです...#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');
    }

});

また、ここで更新しました：Updated JS Fiddle

編集-2: 更新されたリンク

お役に立てれば！！

于 2012-11-13T18:53:37.030 に答える