0

HTML：

<div id="bottomContent" class="bottom_content" > <p>First Content</p> </div>

<div id="bottomContent2" class="bottom_content" > <p>second Content</p> </div>

<div id="bottomContent3" class="bottom_content" > <p>Third Content</p> </div>

JS：

   $("div.one").click (function(){
      $("#bottomContent2").hide();
      $("#bottomContent3").hide();
      $("#bottomContent").animate({width: "toggle"}, 1000);
    });

    $("div.two").click (function(){
       $("#bottomContent").hide();
       $("#bottomContent1").hide();
       $("#bottomContent2").animate({width: "toggle"}, 1000);
    });

    $("div.three").click (function(){
       $("#bottomContent").hide();
       $("#bottomContent2").hide();
       $("#bottomContent3").animate({width: "toggle"}, 1000);
    });

私は次のjQueryコードを持っています。これにより、各divがクリックされると、対応するdivアイテムがアニメーション化され、すでに開いている可能性のある他のdivがすべて閉じられますが、コーディングしてコンパクトにする方法は他にもあると思います。やった。どんな助けでもありがたいです。

4

1 に答える 1

5

data-*私は常に、クリックされている要素に（属性を使用して）追加のメタデータを配置して、そのコンテンツに関連付けることで、この問題に取り組んでいます。

<div class="action" data-content="#bottomContent">
  Click me for bottom content
</div>
<div class="action" data-content="#bottomContent1">
  Click me for bottom content 1
</div>
<div class="action" data-content="#bottomContent2">
  Click me for bottom content 2
</div>

3つのdivすべてに同じクラスが与えられていることに注意してください。これにより、同じアクションを3つすべてに関連付けることができます。

次に、jQueryは次のようになります。

$("div.action").click (function(){
    var $this = $(this);

    $('div.action').not($this).each(function(){
       var $other = $(this);
       var otherTarget = $other.data('content');
       $(otherTarget).hide();       
    });

    var target = $this.data('content');        
    $(target).animate({width: "toggle"}, 1000);

});

実例： http： //jsfiddle.net/rHKML/

于 2012-05-15T10:49:23.100 に答える