0

一連のクリック可能なボックスがあります。ボックスを展開してその画像を非表示にできるようにする必要があります。また、前に開いたものを閉じて、元の高さと定義された幅に戻し、img でフェードバックできるようにする必要もあります。.infoajax コンテンツを読み込む

<div class="box">
   <img src="#" />
   <div class="info"></div>
</div>
<div class="box">
   <img src="#" />
   <div class="info">Ajax load content</div>
</div>
<div class="box">
   <img src="#" />
   <div class="info">Ajax loads content</div>
</div>

css、高さがわかりません。

.box {
  width: 230px;
  height: auto;
}

.info {
  height: auto;
  width: auto;
}

私は試した

$(".box").each(function(){
    var box = $(this);
    box.data('height', $(this).height());
    box.click(function(){
       box.addClass("opened");
       if(box.hasClass("opened"){
           $("img", this).fadeOut("slow", function(){
               box.css("width", "600");
               box.css("height", "500");
               box.removeClass("opened");
           });
       } else { 
           $("img", this).fadeIn("slow");
           box.width(230);
           box.height(box.data('height'));
    });
});
4

3 に答える 3

1

@Diodeusが述べたように、いくつかの構文エラーがありました。調べるには、常に最初にデバッガーを使用する必要があります。

どちらが間違ってif(box.hasClass(".opened"))いるかもあります（クラスの前にドットを追加しないでください）。また、box.addClass('opened');その直前にif機能が壊れていました（コンテンツを表示/非表示にするときは、クラスを追加/削除する必要があります）。

これはあなたが探していたものですか？

    $(".box").each(function(){
        var box = $(this);
        box.data('height', $(this).height());
        box.click(function(){
           if(!box.hasClass("opened")){
               $("img", box).fadeOut("slow", function(){
                   box.css("width", "600");
                   box.css("height", "500");
                   box.removeClass("opened");
               });
           } else { 
               $("img", box).fadeIn("slow");
               box.width(230);
               box.height(box.data('height'));
                box.addClass("opened");
            }                
        });
    });​
于 2012-02-17T16:18:10.887 に答える
1

http://jsfiddle.net/uFz5A/

$(".box").each(function(){
    var box = $(this);
    box.data('height', $(this).height());
    box.click(function(){

       if(box.hasClass("opened")){
           $("img", box).fadeOut("slow", function(){
               box.css({"width":"600","height":"500"});
               box.removeClass("opened");
           });
       } else { 
           $("img", box).fadeIn("slow");
           box.width(230);
           box.height(box.data('height'));
           box.addClass("opened");
      };

  });
});

</p>

于 2012-02-17T16:22:04.170 に答える
0

これが機能する私の最終的なコードです：

$(function(){
//run the function for all boxes
$(".box").each(function () {
    var item = $(this);
    var thumb = $("a", item);
    var infoBox = $(".info", item);
    thumb.click(function(e) {
        e.preventDefault();
        $(".box").removeClass("opened");
        $(".info").empty();
            $(".box a").fadeIn("slow");
        $(".info").css({
                    "width": "auto",
                    "height": "auto"
                });
        $(".box a").css("width", "230"); 
        $(".box a").css("height", "auto");          
        $(".box").css("width", "230"); 
        $(".box").css("height", "auto");
        item.addClass("opened"); 

        if (item.hasClass("opened")) {
            var url = this.href;
            thumb.fadeOut("slow");
                infoBox.css({
                        "visibility": "visible",
                    "height": "auto"
                });
                infoBox.load(url, function () {
                    var newHeight = infoBox.outerHeight(true);
                    $(".readMore", item).click(function (e) {
                        var selector = $(this).attr('data-filter-all');
                                $('#container').isotope({
                                    filter: selector
                                });
                                $('#container').isotope('reloadItems');
                                return false;
                    });
                    $('<a href="#" class="closeBox">Close</a>"').appendTo(infoBox).click(function (e) {
                                e.preventDefault();
                                $("html, body").animate({scrollTop: 0}, 500);
                                $('#container').isotope('reLayout');
                            });
                    item.animate({
                        "width": "692",
                        "height": newHeight
                    }, 300);
                    thumb.animate({
                                "width": "692",
                                "height": newHeight
                    }, 300);
                    infoBox.animate({width: 692, height: newHeight}, function () {
                                $('#container').isotope('reLayout', function () {
                                    Shadowbox.setup();
                                    item.removeClass("loading");
                                    infoBox.css({
                                            "visibility": "visible"
                                    });
                                        var videoSpan = infoBox.find("span.video");
                            iframe = $('<iframe/>', {
                                            'frameborder': 0,
                                            'class': 'tide',
                                            'width': '692',
                                            'height': '389',
                                            'src': 'http://player.vimeo.com/video/' + videoSpan.data("vimeoid") + '?autoplay=0&api=1'
                            });
                            videoSpan.replaceWith(iframe);

                                });
                    });
            });
            };
        });
});
  });
于 2012-02-19T01:26:56.597 に答える