複数のdivを同じクラスを一度に開く

Question

私はカスタムtumblrテーマの複数の非表示のdivにjavascript関数を使用しています。私は問題はクラス名が同じで、私がデフォルトでdivをクリックすると同じですすべてのdivが表示または非表示になります。

場所 'A' と、親のdiv要素 "で対応する 'DIV'：

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
$(document).ready(function() { 
    $(".toggleme").click(function() { 
    $(".toparea3").slideToggle("slow"); 
    return false; 
    }); 
    }); 
</script> 

<a class="toggleme" href="#"><img src="http://www.abc.com/images/share.png"></a> 

<div class="toparea3" style="display:none;"> 
    <div class="share-bar clearfix" style=" margin-top:3px;margin-left: -2px;width: 380px;height: 50px;"> 
     <div class="share-bar-buttons"> 
      <div class="share-bar-facebook"> 
       <iframe src="http://www.facebook.com/plugins/like.php?href={URLEncodedPermalink}&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;font=lucida+grande&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe> 
      </div> 
     </div> 
     <div style="margin-left:80px;margin-top: 15px;" class="share-bar-twitter"> 
      <a href="http://twitter.com/share" class="twitter-share-button" 
             data-url="{Permalink}" 
             {block:Twitter}data-via="{TwitterUsername}"{/block:Twitter} 
             data-related="stylehatch:Premium Tumblr Themes by @newezra"></a> 
     </div> 

     <div style="float: right;margin-top:-25px;" class="share-bar-shorturl"> 
      <div class="linktumb"> 
       http://www.tumblr.com/xdrs2sf 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

は、私は、次のをお勧めします。

<div> 
    <a class='toggleMe' /> 
    <div class='toparea3 /> 
</div> 

次に、あなたがするあなたの内側のセレクタを更新することができます：彼らはすべてのあなたがtogglemeを持っている形式にしている場合、あなたは複数の「toggleme」ボタンを持っていると仮定すると

$('.toggleMe').click(function(evt){ 
    evt.preventDefault(); 
    var parent = $(this).closest('div'); 
    $(".toparea3", parent).slideToggle("slow"); 
} 

Answer 2

このような何かボタンを押してtoparea3は、あなたがこのような何かを行うことができます：

$('.toggleme').click(function(){ 
    $(this).next().slideToggle('slow'); 
    return false; 
}); 

「次」機能を使用すると、拡大したい要素であるDOM、次の要素を取得します。

Answer 3

編集：（用事.children）

.closestセレクタ、または.nextセレクタ誰か提案を使用してみてください。セレクタ.toparea3を用意して、最も近い/次の要素だけでなく、そのクラスだけが開くようにしてください。

$(document).ready(function() { 
    $(".toggleme").click(function() { 
     $(this).closest(".toparea3").slideToggle("slow"); 
     return false; 
    }); 
}); 

Answer 4

私の推薦のdivのidを与え、そしてそれにアンカー要素のhrefポイントを作ることです：ハッシュが有効なjQueryのセレクタである形#toparea3_1で与えられるので

<script> 
$(document).ready(function() { 
    $(".toggleme").click(function() { 
     $(this.hash).slideToggle("slow"); 
     return false; 
    }); 
}); 
</script> 

<a class="toggleme" href="#toparea3_1"><img src="http://www.abc.com/images/share.png"></a> 

<div id="toparea3_1" class="toparea3" style="display:none;"></div> 

このIDで選択し、直接使用することができます。