0

我试图在我的页面上单击链接时触发显示/隐藏效果，我的页面设置方式是我有以下 HTML，

<div class="results clearfix">
        <div class="product">
            <div class="media">

            </div>
            <div class="information">
                <div class="name">A Product</div>
                <a href="">€50</a>
            </div>
        </div>
        <div class="product">
            <div class="media">

            </div>
            <div class="information">
                <div class="name">A Product</div>
                <a href="">€50</a>
            </div>
        </div>
        <div class="product">
            <div class="media">

            </div>
            <div class="information">
                <div class="name">A Product</div>
                <a href="">€50</a>
            </div>
        </div>
        <div class="product">
            <div class="media">

            </div>
            <div class="information">
                <div class="name">A Product</div>
                <a href="">€50</a>
            </div>
        </div>
        <div class="moreWrapper">
            <div class="more">
                <div class="arrow"></div>
                <div class="media">
                    <img src="assets/css/img/more-image.jpg" />
                    <a class="view" href="">View item</a>
                </div>
                <div class="details">
                    <a class="cart" href="">€50</a>
                        <a class="bookmark" href=""></a>
                        <div class="clearfix"></div>
                        <div class="breakdown clearfix">
                            <h1>ÖRSJÖ BELYSNING PJ DESK LAMP</h1>
                            <small>Item Number : UL-1027</small>
                            <dl>
                                <dt>Manufacturer</dt>
                                <dd><img src="assets/img/alessi-logo.jpg"/></dd>
                            </dl>
                            <dl>
                                <dt>Created By</dt>
                                <dd>
                                    <img src="assets/img/created.jpg" alt="" />
                                    <strong>3d_alan</strong>
                                    <span>on 27th Jan 2013</span>
                                </dd>
                            </dl>
                            <dl>
                                <dt>Method of creation</dt>
                                <dd>
                                    <i class="creation icon-camera"></i>
                                    <i class="creation icon-hands"></i>
                                    <i class="creation icon-pencil"></i>
                                    <i class="creation icon-fullscreen"></i>
                                    <i class="creation icon-pencil"></i>
                                    <i class="creation icon-photo"></i>
                                </dd>
                            </dl>
                            <dl>
                                <dt>Year of manufactuer</dt>
                                <dd>1990</dd>
                            </dl>
                        <p><em>Available Formats</em> <a href="">Require a different format?</a></p>
                        <ul class="formats">
                            <li>3DSMax</li>
                            <li>VRay</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="product">
            <div class="media">

            </div>
            <div class="information">
                <div class="name">A Product</div>
                <a href="">€50</a>
            </div>
        </div>
        <div class="product">
            <div class="media">

            </div>
            <div class="information">
                <div class="name">A Product</div>
                <a href="">€50</a>
            </div>
        </div>
        <div class="product">
            <div class="media">

            </div>
            <div class="information">
                <div class="name">A Product</div>
                <a href="">€50</a>
            </div>
        </div>
        <div class="product">
            <div class="media">

            </div>
            <div class="information">
                <div class="name">A Product</div>
                <a href="">€50</a>
            </div>
        </div>
        <div class="moreWrapper">
            <div class="more"></div>
        </div>
    </div>

在每 4 个.product元素之后有一个.moreWrapper，然后是另外 4 个.product元素，然后是另一个.moreWrapper。我正在努力实现的是最接近.moreWrapper要打开的单击元素，目前全部.moreWrapper打开。

这是我当前的javascript，

$(".product").click(function(e){
    $(this).find("a").addClass("set");
    var x = $(this).position().left;
    $(this).parent().find('.moreWrapper').css("display", "none").animate({
        "height" : "0px",
    }, 1000);
    $(this).parent().find('.moreWrapper').css("display", "block").animate({
        "height" : "500px",
    }, 1000);
    $(".arrow").css("left", x+"px");

    return false
});
4

1 回答 1

1

尝试这个：

$(".product").click(function(e){
    $(this).find("a").addClass("set");
    var x = $(this).position().left;
    $(this).parent().find('.moreWrapper').css("display", "none").animate({
        "height" : "0px",
    }, 1000);
    $(this).parent().find('.moreWrapper').next().css("display", "block").animate({
        "height" : "500px",
    }, 1000);
    $(".arrow").css("left", x+"px");
return false;
});

我想这就是你所需要的，只是为了隐藏当前.moreWrapper，并.moreWrapper在它之后显示下一个。

于 2013-02-10T11:20:57.820 回答