javascript - 获取 slideToggle 以展开和显示隐藏内容

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>