Jquery Animation 第二张照片不显示答案

【问题标题】：Jquery Animation Second Photo not displayingJquery Animation 第二张照片不显示
【发布时间】：2013-10-04 00:29:44
【问题描述】：

当我单击第二张照片以使其展开时，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/

【问题讨论】：

两个 div 的 id 相同（展开）这会导致问题
有没有办法将 1 2... 附加到 id 展开？我对 jQuery 比较陌生，这就是我问的原因。我也在用 WordPress AFC 中继器字段构建它。
是的，我只是这样做了，看看我的回答

标签： javascript jquery html css jquery-animate

【解决方案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/

【讨论】：

【解决方案2】：

您有两个带有id="expand" 的元素。禁止 - 这可能会导致 javascript 发疯。

这是来自 MDN 的引用：

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

【讨论】：

【解决方案3】：

使用<div class="expand">

而不是<div id="expand">

【讨论】：