0

当我单击第二张照片以使其展开时，jQuery 动画接受的一切都很好，第一张照片显示在叠加层而不是第二张照片上。我在这里编辑了文件，所以显示第二张照片。

这是我的代码

        #expand .bio-pic2 {
        position:absolute;
        top:0;
        left:0;
    }
    #expand {
        position:absolute;
        width:1000px;
        border: 1px solid black;
        display: none;
        background-color:#ffffff;
        z-index:9999;
       height:323px;
    }
    .bio-pic2 img {
        position:absolute;
        top:0;
        left:0;
        width:323px;
    }
    .testimonial {
        position:absolute;
        top:333px;
        left:0;
        font-size:15px;
    }
    .desc {
        position:absolute;
        top:10px;
        left:333px;
    }
    .bio-pic {
        float:left;
        cursor: pointer;
        z-index:9998;
        margin:0 5px 0 0;
    }

        <div id="expand">
        <div class="test">
            <div class="bio-pic2">
                <img src="http://www.brent-ransom.com/photo-img.jpg" />
                <div class="bio-nt">
                        <h2>Name</h2>

                        <h3>Position</h3>

                </div>
            </div>
            <div class="testimonial">A testimonial!</div>
        </div>
        <div class="desc">This is a paragraph of text.</div>
    </div>

        <div class="bio-pic">
            <img src="http://www.brent-ransom.com/photo-img.jpg" />
        </div>
        <div id="expand">
            <div class="test">
                <div class="bio-pic2">
                    <img src="http://brent-ransom.com/photo2-img.jpg" />
                    <div class="bio-nt">
                            <h2>Name</h2>

                            <h3>Position</h3>

                    </div>
                </div>
                <div class="testimonial">A testimonial!</div>
            </div>
            <div class="desc">This is a paragraph of text.</div>
        </div>
        <div class="bio-pic">
            <img src="http://brent-ransom.com/photo2-img.jpg" />
        </div>

    $(".bio-pic").click(function (e) {
    e.stopPropagation();
    //$('.bio-pic2').toggle("slow");
    var menu = $("#expand");
    $(menu).show().animate({
        width: 500
    }, 1000);
});
$("#expand").click(function () {
    $(this).animate({
        width: 0
    }, 1000, function () {
        $(this).hide();
    });
})

这是我正在处理的 jsfiddle 的链接http://jsfiddle.net/BrentRansom/h64CZ/1/

4

3 回答 3

1

你可以像这样拥有不同的唯一ID

$(".bio-pic").click(function (e) {
    e.stopPropagation();
    //$('.bio-pic2').toggle("slow");
    var menu = $("#expand-"+$(this).attr("id").split("-")[1]);
    $(menu).show().animate({
        width: 500
    }, 1000);
});
$("#expand-1, #expand-2").click(function () {
    $(this).animate({
        width: 0
    }, 1000, function () {
        $(this).hide();
    });
})

或使用类（更好的方法）

演示http://jsfiddle.net/h64CZ/2/

于 2013-10-03T16:01:02.930 回答
0

你有两个元素id="expand"。这是被禁止的——它可能会导致 javascript 发疯。

这是来自MDN的引用：

该属性定义了一个唯一标识符 (ID)，该标识符在整个文档中必须是唯一的。

于 2013-10-03T15:55:55.827 回答
0

采用<div class="expand">

代替<div id="expand">

于 2013-10-03T16:29:44.693 回答