Question

可能重复：
open expand/ close back to original sizes a series of boxes with img fade

我正在努力应对这种逻辑，我无法让它发挥作用。我需要遍历每个盒子以获得原始高度并保存。然后我需要能够点击并展开和项目，同时检查是否有任何其他打开，如果是，将其关闭回原来的高度和宽度（它是一个设置的宽度）。我正在努力的唯一一点是这就是我在完整脚本开头所拥有的，我用我（我相信错误的）逻辑评论了我正在尝试做的事情。这部分后面的代码很好，如果你想在这里仔细检查它是一个带有完整脚本的pastebin：http://pastebin.com/u72Q5Cqj

基本的html结构

<div class="box">
  <img src="test.jpg" />
  <div class="info"></div>
</div>
<div class="box">
  <img src="test2.jpg" />
  <div class="info"></div>
</div>
<div class="box">
  <img src="test3.jpg" />
  <div class="info"></div>
</div>

Jquery的

    //run the function for all boxes
    $(".box").each(function () {
            var item = $(this);
            var thumb = $("a", item);
            var infoBox = $(".info", item);
            // save each box original height 
            $.data(this, 'height', $(this).height());
            item.click(function(e) {
                    e.preventDefault();
                    // remove any box with class "opened"
                    $(".box").removeClass("opened");
                    // this is to empty ".info" which is a child div in which
                    // I load  content via ajax into
                    $(".info").empty();
                    // here i'm saying if any box doesn't have a class "opened"
                    // fadeIn its `<a>`, i am fadingOut later in the code
                    $(".box a").not(".opened").fadeIn("slow");
                    //set back `.info`width and height to auto, is empty anyway
                    $(".box .info").not.css({
                            "width": "auto",
                            "height": "auto"
                    });
                    // in here i'm trying to set back any box without a class "opened"
                    // back to its original width which is a set width
                    $(".box").not(".opened").css("width", "230");
                    // in here i'm trying to set back any box without a class "opened"
                    // back to its original height saved at the beginning of the code 
                    $.data($(".box"), 'height');
                    // now I add the class opened to this clicked item
                    item.addClass("opened");      
                    // check if it has a class "opened" and if so do the rest 
                    if (item.hasClass("opened")) {
                            var url = this.href;.................etc

Answer 1

好吧，我没办法尝试解决方案，但你的代码有一些错误您声明newHeight两次，iframe未声明，并且;声明结尾处出现意外if。
那么，为什么要在click()内的$(this)上调用each()事件？这似乎是不必要的，它可能对性能没有好处。您可以在循环之外声明变量，将链接事件声明为链接。

$('.box').each().click();

最后，我建议您为load()和click()事件创建一个功能，以保持干燥。

Answer 2

这是我的最终代码：

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

                                });
                    });
            });
            };
        });
});
 });

打开一个盒子，然后将另一个盒子关闭到原来的尺寸

2 个答案: