ページでリンクがクリックされたときに表示/非表示の効果をトリガーしようとしています。ページの設定方法は、次の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>
.product
4つの要素ごとに.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
});