자바 스크립트 단일 요소 드롭 다운

Question

저는 자바 스크립트에 상당히 익숙하며 클릭 할 때마다 내 코드의 각 요소를 만드는 방법을 짐작 해 왔습니다.

처음에는 $ (this)를 추가해야한다고 생각했습니다. 각 이벤트마다 내 페이지를 새로 고침해도 동작에 영향을주지 않았으므로 모든 div가 클릭 한 번에 계속 애니메이션을 적용합니다. 여기

내가 http://jsfiddle.net/alexmk92/z59p8/ 그래서 당신은 내가 전달하기 위해 노력하고 문제를 참조 여기에 현재 코드를 업로드 한

 function slideDiv(elem) { 

     if ($(".slidePanel").is(":visible")) { 

      $(".contentFade").animate(
       { 
        opacity: "0" 
       }, 

       600, 

       function(){ 
        $(".slidePanel").slideUp(); 
       } 
      ); 
     } 
     else { 
      $(".slidePanel").slideDown(600, function(){ 
       $(".contentFade").animate(
        { 
         opacity: "1" 
        }, 
        600 
       ); 
      }); 
     } 
    } 

스크립트입니다 ...

누구에 관한 올바른 방향으로 날 지점 수 어떻게 해결할 수 있을까요?

Answer 1

....

$('a').click(function() { 
    $(this).next().slideToggle(400, function() { 
     $(this).children('.contentFade').animate({opacity:'1'},400); 
    }); 
}) 

나는 이것을 할 필요가있는 당신의 태그에 클래스를 추가 할 것을 제안한다. class="toggle"

Answer 2

내가 당신 JS 코드

만을위한 래퍼

<div> <!-- new line--> 
<a href="#" onclick="slideDiv(this);"> <p class="blueText">A post title here :</p> </a> 

<div class="slidePanel"> 
    <div class="contentFade"> 
     <p class="p1">Some text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my page</p> 
    </div> 
    <!-- end contentFade --> 
    </div> 
    <!-- end sldiePanel --> 
    <!-- end post1 --> 
</div><!-- new line--> 
<div><!-- new line--> 
<!-- second post to show issue --> 
<a href="#" onclick="slideDiv(this);"> <p class="blueText">A post title here :</p> </a> 

<div class="slidePanel"> 
    <div class="contentFade"> 
     <p class="p1">Some text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my pageSome text I will be displaying on my page</p> 
    </div> 
    <!-- end contentFade --> 
    </div> 
    <!-- end sldiePanel --> 
    <!-- end post1 --> 
    </div><!-- new line--> 

후 일부 사업부에서 슬라이드 먼저 slidePanel하고 링크를 포장하여 단지 조금 (4-6 라인)

을 편집 그 모든 답이 지나치게 복잡

function slideDiv(elem) { 

    if ($(".slidePanel").is(":visible"))//new line 
     $(".slidePanel").slideUp();//new line 
    if ($(".slidePanel",$(elem).parent()).is(":visible")) {//notice the $(elem).parent() 
     $(".contentFade",$(elem).parent()).animate(
      { 
       opacity: "0" 
      }, 

      600, 

      function(){ 
       $(".slidePanel",$(elem).parent()).slideUp(); 
      } 
     ); 
    } 
    else { 
     $(".slidePanel",$(elem).parent()).slideDown(600, function(){ 
      $(".contentFade",$(elem).parent()).animate(
       { 
        opacity: "1" 
       }, 
       600 
      ); 
     }); 
    } 
}