Javascript單個元素下拉框

Question

我對javascript相當陌生，並且一直在嘗試深入瞭解如何在單擊代碼時將每個元素都放下。

乍一看，我想我需要添加$（this）。對於每個事件，但刷新我的頁面並不會影響行爲，所有div會在點擊一次後繼續生成。

這裏是腳本

 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 
       ); 
      }); 
     } 
    } 

我已上載這裏當前代碼http://jsfiddle.net/alexmk92/z59p8/所以你看，我要傳達的問題...

可能有人點我在正確的方向，以如何解決這個問題？

Answer 1

所有這些問題的答案都過於複雜....

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

我建議在您的標籤中添加一個類，以便像class="toggle"

Answer 2

我編輯您只是點點（大約4-6行）

第一包住slidePanel和鏈接在一些div來向上滑動只是一個包裝

<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--> 

然後你的js代碼

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 
      ); 
     }); 
    } 
}