-1 
$(document).ready(function(){
    $(".lower_it").click(function() {
        $("#" + this.id).toggleClass("active")
        $("#" + this.id).siblings(".itemContainer").toggleClass("hide")     
        $(".itemContainer").not("#" + this.id).removeClass("active");
        return false;
    });
});

デモ - http://jsfiddle.net/JKnjz/60/

下部のストライプはナビゲーション ボタン 1、2、3 です。上部のボックスに影響します。

  • 赤 = アクティブ
  • 10 幅 = 折りたたみ
  • 100x100 = デフォルトの位置、

別のボックスをアクティブ化するときに、以前のすべての位置を折りたたむことを望みます。デモをいじってみると、シーケンスがごちゃ混ぜになっていることに気付くでしょう。

[編集]

申し訳ありませんが、これについては以前に言及しませんでした。私の主なプロジェクトでは、独自のクラスを使用して 2 つの異なる div を使用する必要がありますが、ボタンと影響を受けるボックスは同じ ID を共有しています。これが、("#" + this.id) を使用している理由です。デモではすでに動作しています。

4

1 に答える 1

0

まず、IDS は一意である必要があります...同じ ID を持つ 2 つの要素があります...必要なものを取得する最善の方法は、data html5 属性を使用$.data()して、特定のデータ属性を取得することです。

 <div>
   <div id="lol1" class="itemContainer">1</div>
   <div id="lol2" class="itemContainer">2</div>
   <div id="lol3" class="itemContainer">3</div>
  </div>
 <div>
 <div data-id="lol1" class="lower_it">1</div>
 <div data-id="lol2" class="lower_it">2</div>
 <div data-id="lol3" class="lower_it">3</div>

コアロジックのほとんどを変更することなく..

$(document).ready(function(){
  $(".lower_it").click(function() {
    $("#" + $(this).data('id')).toggleClass("active").removeClass("hide"); //<---remove class hide
    $("#" + $(this).data('id')).siblings().addClass("hide")   //<--addclass hide to all siblings.
    $(".itemContainer").not("#" + $(this).data('id')).removeClass("active");
    return false;
  });
});

ここでフィドル

ただし、CSS を追加して、loser_it div に背景色を設定する必要があります...すべての div にクラスを追加します...これは、必要に応じて CSS を変更できる例にすぎません。

Cssでフィドルを更新する

于 2013-08-05T09:56:16.760 に答える