0

製品 (タイトルと説明) を表示する多くの div を含むページがありますが、説明が非表示になっていて、タイトルをクリックすると、説明に slideToggle 効果があります

DIVS HTML

<first><h4>Product1</h4></first>
<span><div><ocultar>Description</ocultar></div></span>

<second><h4>Product2</h4></second>
<span><div><ocultar2>Description</ocultar></div></span>

....
...
...
And third, fourth, etc...

そして、この機能を独自の機能で最適化する機能が欲しい..

$("ocultar").slideToggle("slow");
$("first").click(function () {
    $("ocultar").slideToggle("slow");
});
$("ocultar2").slideToggle("slow");
$("second").click(function () {
    $("ocultar2").slideToggle("slow");
});
...
...
...

私は私を助けることができると思います!

4

1 に答える 1

0

できることは、要素にクラス属性を追加することです。これにより、jQuery での操作が簡単になります。

<div class="title"><h4>Product1</h4></div>
<div class="description"><ocultar>Description</ocultar></div>

<div class="title"><h4>Product1</h4></div>
<div class="description"><ocultar>Description</ocultar></div>

この jQuery は、class 属性を持つ要素の各クリック イベントに自身をアタッチし、titleclass 属性を持つ最も近い div を表示しdescriptionます。

// jQuery 1.7+

$(".title").on('click',function(){
  $(this).next('div.description').slideToggle("slow");
});

デモ

于 2012-07-16T22:10:35.877 に答える