Question

我试图在我的页面上点击链接时触发显示/隐藏效果，我的页面设置方式是我有以下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
});

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

jquery找到要点击的最接近元素

1 个答案: