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>

.product4つの要素ごとに.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 に答える