0

今のところ頭をかいてます。

3、4、5 などに変わる可能性のある 2 つのボタンを含む画像があります。各ボタンには、画像の横にある情報ボックスにフェードインするクリック機能があります。情報ボックスはボタンごとに異なります。たとえば、ボタン 1 は羊に関するもので、ボタン 2 は犬に関するものです。次に、各ボタンをクリックして、fadeToggle で情報ボックスを 1 つずつ表示する機能を用意します。

私が抱えている問題は、それぞれのコンテナが同じクラスを持っているため、そのコンテナの2番目の子要素を取得してフェードインしていますが、最初にクリックしたものだけでフェードインするなどです.

以下のマークアップと説明を参照してください。

Jクエリ

    var children = $(".anatomy").children().eq(1);

$(document).ready(function(){     
    fadeDetail();
});

function fadeDetail() {

    $(".anatomy div.control").click(function() {
        children.each(function(){
        $(this).fadeToggle('slow');
        })
    });

}

Html - ここで .control ボタンは、display: none; に設定された .detail ボックスを開きます。これらのボックスが 1 ページに複数あり、それぞれ .detail div に異なるコンテンツが含まれている場合があります。

<article class="anatomy">
    <!-- custom field data will allow these to be positioned via cms-->
       <div class="control" style="left:; right:; top:300px; bottom:;">
            <img src="img/more-button.png" alt="more-button" width="37" height="36" />
        </div>
        <!-- hide this div as it will not be needed. Only needed when asked to open-->
        <div class="detail">
        <img src="img/articles/detail-image.png" alt="detail-image" width="340" height="217" />
        <h1>Lorem ipsum</h1>
        <p>Hello</p>
        </div>
</article>

私はほとんどそこにいると思いますが、私の知識はここまで進んでいません.

どんなヒントでも素晴らしいでしょう、

ありがとう

マーク

4

3 に答える 3

1

私の理解が正しければdiv.detail、 のクリックでトグルするだけですdiv.control。以下のように関数を書き直してみてください。

$(".anatomy div.control").click(function() {
    $(this).next().fadeToggle('slow');        
});
于 2012-06-01T14:51:24.817 に答える
0

アイテムがクリックされたときに非表示にしたい各要素にクラスを追加してから呼び出してみませんか

  $('.classToFade').fadeToggle('slow')
于 2012-06-01T14:52:00.217 に答える
0 
$('.control').on('click', function() {
  $(this).next().fadeToggle();
});
于 2012-06-01T14:50:43.840 に答える