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

原始代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你想要这样：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

获取slideToggle以展开并显示隐藏的内容

2 个答案: