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

时间：2017-09-11 03:37:47

标签： jquery show-hide

我有3个生物配置文件，其中包含相应的配置文件详细信息最初隐藏生物细节，点击个人资料图片，其他2消失，然后生物细节淡入。还有一个关闭按钮关闭生物细节块，之后3个个人资料图像淡入。我有这个工作，但有很多代码可以这样做。我想截断它，可能使用数据属性或类似的东西。

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

＆＃13;
＆＃13; 
// 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");
    });
＆＃13; 
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';
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

不确定问题究竟是什么，但我认为您正在寻找的答案只是您不想做的工作。我的回答是：花点时间搞清楚。看起来你知道自己在做什么 - 如果你花时间去学习它，对你赞不绝口;你那么聪明。

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

答案 1 :(得分：0)

只需用以下代码替换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');
});

其他我的推荐：

  1. 将jQuery替换为新版本https://code.jquery.com/jquery-3.2.1.min.js
  2. 使用$（＆＃34; .some＆＃34;）。on（＆＃34; click＆＃34;，function（event）{}）;而是$（＆＃34; .some＆＃34;）。点击
  3. 尝试使用类代替id进行make操作。例如，对我而言，我使用多个元素进行操作，而不是使用一个
相关问题
最新问题