兩個按鈕顯示兩個不同的div

Question

我的jQuery代碼有問題。我想單擊屬於該按鈕的預覽文本之一，另一個最終關閉。

文本應該使用slideDown()去掉，並使用slideUp()消失。它如何適應它並沒有造成混亂？

HTML：

<div class="ata-pdf-wrapper ata-btn-video"> 
    <a title="Videos"> 
     <span>Videos</span> 
     <span> </span> 
    </a> 
</div> 
<div class="ata-pdf-wrapper ata-btn-pdf"> 
    <a title="Download PDF"> 
     <span>Download</span> 
     <span> </span> 
    </a> 
</div> 
<br/> 
<br/> 
<div class="ata-media-wrapper"> 
    <div class="ata-downloads"> 
     <ul> 
      <li> 
       <a title="DQA (free)" href="http://www.ataccama.com/en/products/dq-analyzer/download.html">DQA (free)</a> 
      </li> 
      <li> 
       <a title="Product Sheet" href="http://www.ataccama.com/dq-analyzer-product-sheet">Product Sheet</a> 
      </li> 
      <li> 
       <a title="User Guide" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/Ataccama%20DQA%209%20User%20Guide.pdf">User Guide</a> 
      </li> 
      <li> 
       <a title="Frequently Asked Questions" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/DQA%209%20FAQ.pdf">Frequently Asked Questions</a> 
      </li> 
     </ul> 
    </div> 
    <div class="ata-videos"> 
     <ul> 
      <li> 
       <a title="Creating a Profile" href="https://www.youtube.com/watch?v=WC_VZ5z5q3E">Creating a Profile</a> 
      </li> 
      <li> 
       <a title="Understanding Profiling Results" href="https://www.youtube.com/watch?v=2L35k080ovQ">Understanding Profiling Results</a> 
      </li> 
      <li> 
       <a title="Advanced Profiling" href="https://www.youtube.com/watch?v=nQGBYkTXNPc">Advanced Profiling</a> 
      </li> 
      <li> 
       <a title="Email Analysis" href="https://www.youtube.com/watch?v=u45G0yo9sE4">Email Analysis</a> 
      </li> 
     </ul> 
    </div> 
</div> 

的jQuery：

$(document).ready(function() { 

    $(".ata-pdf-wrapper.ata-btn-video").click(function(){ 
     if ($(".ata-pdf-wrapper.ata-btn-video").hasClass("active")) { 
      $(".ata-media-wrapper").hide(); 
      $(".ata-videos").fadeIn(500); 
      $(".entry-content").removeClass("shadow"); 
      $(".ata-pdf-wrapper.ata-btn-video").removeClass("active"); 
     } else{ 
      $(".ata-pdf-wrapper.ata-btn-video").addClass("active"); 
      $(".ata-media-wrapper").show(); 
      $(".ata-videos").slideDown(500); 
      $(".entry-content").addClass("shadow"); 
     }; 
    }); 

    $(".ata-pdf-wrapper.ata-btn-pdf").click(function(){ 
     if ($(".ata-pdf-wrapper.ata-btn-pdf").hasClass("active")) { 
      $(".ata-media-wrapper").hide(); 
      $(".ata-downloads").fadeIn(500); 
      $(".entry-content").removeClass("shadow"); 
      $(".ata-pdf-wrapper.ata-btn-pdf").removeClass("active"); 
     } else{ 
      $(".ata-pdf-wrapper.ata-btn-pdf").addClass("active"); 
      $(".ata-media-wrapper").show(); 
      $(".ata-downloads").slideDown(500); 
      $(".entry-content").addClass("shadow"); 
     }; 
    }); 

}); 

的代碼上jsFiddle。

Answer 1

如果你明白你想要對這些列表做什麼，那麼下面的例子就不那麼麻煩了。

$(document).ready(function() { 
 

 
\t $(".ata-pdf-wrapper.ata-btn-video").click(function(ev){ 
 
      var $currentTarget = $(ev.currentTarget); 
 
\t \t if ($currentTarget.hasClass("active")) { 
 
      $(".ata-videos").slideUp(500); 
 
\t \t \t $(".entry-content").removeClass("shadow"); 
 
\t \t \t $currentTarget.removeClass("active"); 
 
\t \t } else{ 
 
\t \t \t $currentTarget.addClass("active"); 
 
\t \t \t $(".ata-videos").slideDown(500); 
 
\t \t \t $(".entry-content").addClass("shadow"); 
 
\t \t }; 
 
\t }); 
 

 
\t $(".ata-pdf-wrapper.ata-btn-pdf").click(function(ev){ 
 
     var $currentTarget = $(ev.currentTarget); 
 
\t \t if ($currentTarget.hasClass("active")) { 
 
\t \t \t $(".ata-downloads").slideUp(500); 
 
\t \t \t $(".entry-content").removeClass("shadow"); 
 
\t \t \t $currentTarget.removeClass("active"); 
 
\t \t } else{ 
 
\t \t \t $currentTarget.addClass("active"); 
 
\t \t \t $(".ata-downloads").slideDown(500); 
 
\t \t \t $(".entry-content").addClass("shadow"); 
 
\t \t }; 
 
\t }); 
 

 
});

.ata-pdf-wrapper a { 
 
\t display: inline-block; 
 
\t background: #55d239; 
 
\t border-radius: 20px; 
 
\t text-align: center; 
 
\t border: 2px solid #fff; 
 
\t cursor: pointer; 
 
} 
 

 
.ata-pdf-wrapper a > span { 
 
\t float: left; 
 
\t padding: 6px 20px 5px 25px; 
 
\t color: #fff; 
 
} 
 

 
.ata-pdf-wrapper.ata-btn-video a > span + span, 
 
.ata-pdf-wrapper.ata-btn-pdf a > span + span, 
 
.ata-pdf-wrapper a > span + span { 
 
\t float: right; 
 
\t width: 11px; 
 
\t height: 18px; 
 
\t padding: 10px 10px 10px 18px; 
 
\t border-left: 1px solid #45bd2a; 
 
} 
 

 
.ata-pdf-wrapper a:hover, 
 
.ata-pdf-wrapper.active a { 
 
\t border: 2px solid #309319; 
 
} 
 

 
.ata-pdf-wrapper.ata-btn-video { 
 
\t right: 200px; 
 
} 
 

 
.ata-downloads, 
 
.ata-videos { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="ata-pdf-wrapper ata-btn-video"> 
 
<a title="Videos"> 
 
<span>Videos</span> 
 
<span> </span> 
 
</a> 
 
</div> 
 

 
<div class="ata-videos"> 
 
<ul> 
 
<li> 
 
<a title="Creating a Profile" href="https://www.youtube.com/watch?v=WC_VZ5z5q3E">Creating a Profile</a> 
 
</li> 
 
<li> 
 
<a title="Understanding Profiling Results" href="https://www.youtube.com/watch?v=2L35k080ovQ">Understanding Profiling Results</a> 
 
</li> 
 
<li> 
 
<a title="Advanced Profiling" href="https://www.youtube.com/watch?v=nQGBYkTXNPc">Advanced Profiling</a> 
 
</li> 
 
<li> 
 
<a title="Email Analysis" href="https://www.youtube.com/watch?v=u45G0yo9sE4">Email Analysis</a> 
 
</li> 
 
</ul> 
 
</div> 
 

 
<div class="ata-pdf-wrapper ata-btn-pdf"> 
 
<a title="Download PDF"> 
 
<span>Download</span> 
 
<span> </span> 
 
</a> 
 
</div> 
 

 
<div class="ata-downloads"> 
 
<ul> 
 
<li> 
 
<a title="DQA (free)" href="http://www.ataccama.com/en/products/dq-analyzer/download.html">DQA (free)</a> 
 
</li> 
 
<li> 
 
<a title="Product Sheet" href="http://www.ataccama.com/dq-analyzer-product-sheet">Product Sheet</a> 
 
</li> 
 
<li> 
 
<a title="User Guide" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/Ataccama%20DQA%209%20User%20Guide.pdf">User Guide</a> 
 
</li> 
 
<li> 
 
<a title="Frequently Asked Questions" href="https://ataccama.s3.amazonaws.com/documentation/9.x.x/DQA/DQA%209%20FAQ.pdf">Frequently Asked Questions</a> 
 
</li> 
 
</ul> 
 
</div>  
 

 
<br/> <br/>