여러 div 동일한 클래스를 한 번에 열어 사용

Question

사용자 지정 tumblr 테마 .. 여러 개의 숨기기 표시 divs에 대한 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').click(function(evt){ 
    evt.preventDefault(); 
    var parent = $(this).closest('div'); 
    $(".toparea3", parent).slideToggle("slow"); 
} 

Answer 2

그들이 당신이 toggleme이 형식의 모든 있다면 당신은 여러 "toggleme"버튼이 가정 버튼 다음 toparea3, 당신은 이런 식으로 뭔가를 할 수 :

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

"다음"기능을 사용하면 확장 할 요소 인 DOM, 다음 요소를 가져옵니다.

Answer 3

편집 : (신경 끄시 고 .children)

.closest 선택하거나 다음 내용 셀렉터 다른 사람이 제안을 사용해보십시오. 선택기 .toparea3을 제공하여 가장 가까운/다음 요소가 아닌 해당 클래스 만 열리도록하십시오.

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

Answer 4

내 추천은 그것에 앵커 요소의 href 점을 사업부에게 ID를 부여하고, 확인하는 것입니다 : 해시가 유효한 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를 선택하고 직접 사용할 수 있습니다.