0

我一直在为一些次要的 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 时，我希望它们被隐藏并且它们的“封闭”高度不会被扭曲。

当我单击“已打开”“工作”项目时，我还想再次关闭“打开”类。但是 ToggleClass 让每一件作品都自己打开，而不是一件一件地关闭。

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

提前致谢！

梅丁。

还有为什么它没有任何想法？

$(".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 想法划分为函数。开放工程（）；看起来不错，但 closeWorks(); 只是不工作...

4

1 回答 1

1

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

当我单击“已打开”“工作”项目时，我还想再次关闭“打开”类。但是 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
});

然后：

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

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 中添加画廊 div 时，我希望它们被隐藏并且它们的“封闭”高度不会被扭曲。

无法理解您的意思，对不起..
编辑 尝试：

.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。

于 2013-02-12T02:39:43.943 回答