Question

我一直在努力处理一些小的html / jquery逻辑。

我将Divs称为“工作”，在其中，有一个画廊。

<div class="work">
        <span class="workTitle">A Work</span>
        <div class="gallery" style="" >
            <img src="images/works/01.jpg" width="200" height="200" /> 
            <img src="images/works/01.jpg" width="200" height="200" /> 
            <img src="images/works/01.jpg" width="200" height="200" /> 
            <img src="images/works/01.jpg" width="200" height="200" /> 
        </div>
    </div>

当我点击一件作品时，他们的高度和边距会因为切换以下类而在jquery中发生变化：

work.click(function() {

    work.removeClass("on");
    $(this).addClass("on");
});

但问题是，当我尝试添加画廊div时，在我的“工作”div中，我希望它们被隐藏，而它们的“封闭”高度不会被扭曲。

当我点击“已打开”的“工作”项目时，我也想再次关闭“on”课程。但是ToggleClass使每一件作品都自己开放，而不是一个接一个地相互关闭。

最后一个问题是，我如何设置高度动画？我得到了一个特定的值，但它只是设置了margin参数。

提前致谢！

倚天。

为什么它没有任何想法？

$(".work").click(function () {
    openWork($(this));
});


function openWork($) {
    $.animate({ marginLeft: openMargin }, 500, 'swing', function() {
        // completion handler
        $.animate({ height: workHeight }, 500, function () {
            closeWorks($(".work").not($(this)));
        });
    });
}

function closeWorks($) {
    $.animate({ height: '100%' }, 500, 'swing', function() {
        $.animate({ marginLeft: closedMargin }, 500, 'swing', function() {});
});

我试图将你的jq_array想法划分为函数。 openWorks（）;好像但是closeWorks（）;只是不起作用......

Answer 1

嗯......我会分开你的问题，因为有太多不同的部分。无论如何，我的位：

我也想关闭＆＃34; on＆＃34;当我点击已经打开的＆＃39;再次上课时＆＃39;工作＆＃39;项目。但是ToggleClass使每一件作品都自己开放，而不是一个接一个地相互关闭。

$(".work").click(function() {
    jq_array = $(".work").not($(this));   //all the others
    jq_array.removeClass("on");           //close any other, if open
    $(this).toggleClass("on");            //open or close the clicked one
});

然后：

最后一个问题是，我如何设置高度动画？我得到了一个特定的值，但它只是设置了margin参数。

var height_sttring = "200px";   // craft the height string

$('#selector').animate(
    { height: height_sttring }, //this is an hash, can contain more keys
    1000,                       // how many milliseconds
    function() {
    // completion handler
    }
);

但问题是，当我尝试添加图库div时，在我的工作中＆＃39; div，我希望它们被隐藏起来并且它们已经关闭了＃39;高度不会变形。

无法理解你的意思，对不起..
的修改尝试：

.work {
    position: relative;
}
.work > .gallery {
    display: none;
    position: absolute;     // this way it will no more occupy "physical" space in the DOM.
    bottom: 10px;           // of course you can adjust this.
}
.work.on > .gallery {
    display: block;
}

这应该可行，尽管您应该进行一些实验以使其适合您的动画时间。我首先展开父div.work，然后淡入内div.gallery。

隐藏和显示嵌套的div？

1 个答案: