Slide Toggle With Multiple Divs

Question

複数のdiv、特にspGroupSubView（＃）を、spForumToggleIcon（＃）というIDの画像へのリンクをクリックして切り替えようとしています。これは関数内で可能ですか？

<div class='spListSection'> 
    <div class='spGroupViewSection'> 
     <a id='spForumToggleIcon1' class='spToggleButton spRight' title='Click to expand forum group' rel='nofollow' href='#'><img src='images/sp_TogglePlus.png' alt=''/></a> 
     <img id='spGroupHeaderIcon1' class='spHeaderIcon spLeft' src='' alt='' /> 
     <div id='spGroupHeaderName1' class='spHeaderName'>Group 1</div> 
     <div style='clear: both;'></div> 
     <div id='spGroupSubView1' class='spSubGroupView'> 
      <div class='spGroupForumSection spOdd spUnreadPosts' id='topic1'> 
      </div> 
      <div class='spGroupForumSection spOdd spUnreadPosts' id='topic2'> 
      </div> 
      <div class='spGroupForumSection spOdd spUnreadPosts' id='topic3'> 
      </div> 
     </div> 
    </div> 
    <div class='spGroupViewSection'> 
     <a id='spForumToggleIcon3' class='spToggleButton spRight' title='Click to expand forum group' rel='nofollow' href='#'><img src='images/sp_TogglePlus.png' alt=''/></a> 
     <img id='spGroupHeaderIcon3' class='spHeaderIcon spLeft' src='' alt='' /> 
     <div id='spGroupHeaderName3' class='spHeaderName'>Group 2</div> 
     <div style='clear: both;'></div> 
     <div id='spGroupSubView3' class='spSubGroupView'> 
      <div class='spGroupForumSection spOdd spUnreadPosts' id='topic4'> 
      </div> 
      <div class='spGroupForumSection spOdd spUnreadPosts' id='topic5'> 
      </div> 
     </div> 
    </div> 
    <div class='spGroupViewSection'> 
     <a id='spForumToggleIcon4' class='spToggleButton spRight' title='Click to expand forum group' rel='nofollow' href='#'><img src='images/sp_TogglePlus.png' alt=''/></a> 
     <img id='spGroupHeaderIcon4' class='spHeaderIcon spLeft' src='' alt='' /> 
     <div id='spGroupHeaderName4' class='spHeaderName'>Group 3</div> 
     <div id='spGroupSubView4' class='spSubGroupView'> 
      <div class='spGroupForumSection spOdd spUnreadPosts' id='topic6'> 
      </div> 
     </div> 
    </div> 
</div> 

私が行った研究から1つのdivを作成することしかできません。私はこれに関する助けに感謝します。

おかげ

Answer 1

このコードは、クリックされた.spToggleButtonと同じ.spGroupViewSectionに.spSubGroupViewのdivにslideToggleを行います。

$('.spToggleButton').click(function() { 
    $(this).closest('.spGroupViewSection').find('.spSubGroupView').slideToggle(); 
}); 

ここで動作することがわかります。 http://jsfiddle.net/jfriend00/4Z8mY/。それは何

は次のとおりです。

1. がspGroupViewSectionのクラスで最も近い祖先を見つけ、クリックされたオブジェクトを皮切り.spToggleButtonオブジェクト
2. のクリックハンドラをインストールします。
3. .spSubGroupViewに一致するオブジェクトをそのオブジェクトで検索します。
4. 次に、一致するものについては.slideToggle()を呼び出してください。