切換幻燈片以展開和顯示隱藏的內容

Question

我正在嘗試獲取一個菜單，以僅在頁面加載時顯示標題。 然后，當您單擊菜單標題或.project-name-block ，菜單項將展開並顯示所單擊項的描述。 現在，這使菜單項完全消失。 我注釋掉了我試圖使描述顯示出來的方式，因為它不起作用。

旁注...如何獲得第一個project-name-block ，使其在頁面加載時完全展開？

更新：

我將JavaScript更改為此，但是我無法弄清楚如何僅獲得單擊的框以僅顯示該特定描述而不是全部三個。

$('.project-name-block').click(function() {
  //$(this).slideToggle('slow');
  $('.project-name-description').slideToggle('slow');
  //$(this).attr('project-name-description').show();
});

原始代碼：

 $('.project-name-block').click(function() { $(this).slideToggle('slow'); //$(this).attr('project-name-description').show(); }); 

 .project-name-block { border-top: 1px solid black; padding: 20px 10px; width: 30%; } .project-name-title { color: blue; font-size: 2em; } .project-name-description { display: none; font-size: 1em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="project-name-container-right"> <div class="project-name-block"> <div class="project-name-title">Project 1</div> <div class="project-name-description">This is the text for Project 1</div> </div> <div class="project-name-block"> <div class="project-name-title">Project 2</div> <div class="project-name-description">This is the text for Project 2</div> </div> <div class="project-name-block"> <div class="project-name-title">Project 3</div> <div class="project-name-description">This is the text for Project 3</div> </div> </div> 

Answer 1

您想要這樣：

 JS: var allPanels = $('.project-name-description').hide(); $('.project-name-block:eq(0) .project-name-description').show(); $('.project-name-block').click(function() { allPanels.slideUp(); $(this).children('.project-name-description').slideDown(); return false; }); 

 .project-name-block { border-top: 1px solid black; padding: 20px 10px; width: 30%; } .project-name-title { color: blue; font-size: 2em; } .project-name-description { display: none; font-size: 1em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="project-name-container-right"> <div class="project-name-block"> <div class="project-name-title">Project 1</div> <div class="project-name-description">This is the text for Project 1</div> </div> <div class="project-name-block"> <div class="project-name-title">Project 2</div> <div class="project-name-description">This is the text for Project 2</div> </div> <div class="project-name-block"> <div class="project-name-title">Project 3</div> <div class="project-name-description">This is the text for Project 3</div> </div> </div> 

Answer 2

$(document).ready(function() {
      $('.project-name-block:eq(0)').slideDown('slow');
})