根据点击 ID 显示隐藏 div 面板答案

【问题标题】：Show hide div panels based on click of an ID根据点击 ID 显示隐藏 div 面板
【发布时间】：2017-09-11 03:37:47
【问题描述】：

我有 3 个具有相应个人资料详细信息的个人资料。最初，生物详细信息被隐藏，单击个人资料图像时，其他 2 个消失，然后生物详细信息淡入。还有一个关闭按钮可关闭生物详细信息块，之后 3 个个人资料图像淡入。我有这个工作，但有很多代码可以做到这一点。我想将其截断，可能使用数据属性或类似的。

我计划在几个页面上使用此布局，并包含多个配置文件，例如我有另一个页面，一开始会有 6 个这样的 bio 块，将来会添加更多 bio 块，从而为每个 bio 块添加更多代码。

// Board of Directors Bios
    $("#panel_a1").click(function (event) {
        event.preventDefault();
        $("#panela1, #panela2, #panela3").hide();
        setTimeout(function () { $('#bio_a1, #panela1').fadeIn(400) }, 300);
        $("#panela1").addClass("open");
    });

    $("#panel_a2").click(function (event) {    
        event.preventDefault();
        $("#panela1, #panela2, #panela3").hide();
        setTimeout(function () { $('#bio_a2, #panela2').fadeIn(400) }, 300);
        $("#panela2").addClass("open");
    });

    $("#panel_a3").click(function (event) {    
        event.preventDefault();
        $("#panela1, #panela2, #panela3").hide();
        setTimeout(function () { $('#bio_a3, #panela3').fadeIn(400) }, 300);
        $("#panela3").addClass("open");
    });

    $(".close_bio.tm_level_1").click(function (event) {
        event.preventDefault();
        $("#bio_a1, #panela1, #bio_a2, #panela2, #bio_a3, #panela3").hide();
        setTimeout(function () { $('#panela1, #panela2, #panela3').fadeIn(400) }, 300);
        $('#panela1, #panela2, #panela3').removeClass("open");
    });

div.bio_block {
	width: auto;
	height: auto;
	min-height: 373px;
	margin-top: 20px;
}
div.view_bio {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    margin: 5px;
    z-index: 100;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
}
div.bio div.bio_image:hover div.view_bio {
	opacity: 1;
}
div.bio.open div.bio_image:hover div.view_bio {
	opacity: 0;
}
div.view_bio p {	
	font-family: "Montserrat Regular", Arial, Helvetica, sans-serif;
	font-size: 1.5em;
	line-height: normal;
	color: white;
	text-shadow: 2px 2px rgba(0,0,0,0.6);
}
div.bio {
	position: relative;
	float: left;
	width: calc(33.3333333333% - 28px);
	height: auto;
	margin: 0 42px 42px 0;
	z-index: 50;
}
div.bio:nth-child(3n+3) {
	margin: 0 0 42px 0;
}
div.bio.open a {
	cursor: default;
}
div.bio div.bio_image.board,
div.bio div.bio_image.management {
	position: relative;
	width: 100%;
	height: auto;	
}
div.bio div.bio_image img {
    width: 100%;
    border: 5px solid white;
    overflow: hidden;
    box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
}
div.bio div.bio_preview {
	width: auto;
	height: auto;
	text-align: center;
}
div.bio div.bio_preview h2 {
    margin-bottom: 0;
}
div .bio div.bio_preview p.bio_name, div.bio div.bio_preview h2 {
    font-family: "Montserrat Regular", Arial, Helvetica, sans-serif;
    font-size: 1.3em;
    padding-top: 15px;
    line-height: 1.3;
}
.open p.bio_title {
    display: none;
}
div.bio_details {
	float: right;
	width: calc(66.6666666666% - 20px);
}
div.bio_details h3,
div.bio_details p {
	text-align: left;
}
div.bio_details h3 {
	padding-bottom: 5px;
	border-bottom: 1px solid #5a9f44;
}
div.bio_details a.close_bio {
	font-size: 0.85em;
	color: black;
	line-height: 30px;
	display: block;
	float: right;
	text-decoration: none;
	-webkit-transition: color 0.2s;
	   -moz-transition: color 0.2s;
			transition: color 0.2s;
}
div.bio_details a.close_bio:hover,
div.bio_details a.close_bio:focus {
	color: #5a9f44;
}
div.bio_details a.close_bio:before {
	font-family: "Material-Design-Iconic-Font";
    font-size: 30px;
    display: block;
	float: left;
    margin-right: 5px;
    color: #5a9f44;
	content: '\f134';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<h2 class="team_level_1">Board of Directors</h2>
<div class="bio_block">
	<div class="bio" id="panela1">
		<a href="#" id="panel_a1">								
			<div class="bio_image board">
				<div class="view_bio">
					<p>View Bio 1</p>
				</div>
			</div>
		</a>
		<div class="bio_preview">
			<p class="bio_name">Person 1</p>
			<p class="bio_title">Job Title</p>
		</div>							
	</div>
	<div class="bio" id="panela2">
		<a href="#" id="panel_a2">								
			<div class="bio_image board">
				<div class="view_bio">
					<p>View Bio 2</p>
				</div>
			</div>
		</a>
		<div class="bio_preview">
			<p class="bio_name">Person 2</p>
			<p class="bio_title">Job Title</p>
		</div>
	</div>
	<div class="bio" id="panela3">
		<a href="#" id="panel_a3">								
			<div class="bio_image board">
				<div class="view_bio">
					<p>View Bio 3</p>
				</div>
			</div>
		</a>
		<div class="bio_preview">
			<p class="bio_name">Person 3</p>
			<p class="bio_title">Job Title</p>
		</div>
	</div>
	<div class="bio_details" id="bio_a1" style="display: none;">
		<h3>Job Title 1</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<a href="#" class="close_bio tm_level_1">Close</a>
		<br class="clearfloat" />
	</div>
	<div class="bio_details" id="bio_a2" style="display: none;">
		<h3>Job Title 2</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<a href="#" class="close_bio tm_level_1">Close</a>
		<br class="clearfloat" />
	</div>
	<div class="bio_details" id="bio_a3" style="display: none;">
		<h3>Job Title 3</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<a href="#" class="close_bio tm_level_1">Close</a>
		<br class="clearfloat" />
	</div>
	<br class="clearfloat" />
</div>

【问题讨论】：

标签： jquery show-hide

【解决方案1】：

不确定问题到底是什么，但我认为您正在寻找的答案只是您不想做的工作。我的回答是：花时间弄清楚。看起来你知道自己在做什么——如果你花时间学习它，向你致敬；你聪明多了。

我建议学习如何使用像 angular 或 vue 这样的框架。这些将使您的应用程序更加简单。不需要 jquery 或复杂的 javascript。加入一些引导程序和 bam - 没有更多的 css。有很多关于如何使用这些的教程。

【讨论】：

【解决方案2】：

只需将 JS 代码替换为以下内容：

    var bios = $(".bio");

$(".bio a").on("click", function(){
    bios.hide();
    var current_id = $(this).attr('id');
    var bio_id = current_id.replace(/panel_/g, 'bio_');
    setTimeout(function () { $('#' + bio_id +', #' + current_id.replace(/_/g,'')).fadeIn(400) }, 300);
    $(this).parent().addClass("open");

});

$(".close_bio.tm_level_1").on("click", function (event) {
    $(".bio_details, .bio").hide();
    setTimeout(function () { $('.bio').fadeIn(400) }, 300);
    $('.bio').removeClass("open");
});

$(".bio a").on("click", function () {
    console.log('some event');
});

我的其他建议：

将jQuery替换为新版本https://code.jquery.com/jquery-3.2.1.min.js
使用 $(".some").on("click", function (event) { });而是 $(".some").click
尝试使用类而不是 id 进行 make 操作。例如，对于我来说，我使用多个元素比使用一个更冒犯

【讨论】：