[英]Show / hide text on click multiple IDs
当我点击标题时,我想显示/隐藏切换我正在处理的项目上显示的文本。 我点击标题时设法显示内容,但我无法隐藏当时不需要显示的内容。 我的想法是,如果我点击标题1,则div id =“content1”中的内容会显示。 当我点击title2时,只有id = content2的div显示等。
谢谢大家,
Jquery链接: https : //jsfiddle.net/dt32wshj/3/
<div class="wrap">
<h1 class="showcontent" id="1">Text 1</h1>
<div class="content" id="content1">
<h3 id="sub1">Sub 1.1</h3>
<div class="sub" id="Xsub1"><p>Para 1.1</p></div>
<h3 id="sub2">Sub 1.2</h3>
<div class="sub" id="Xsub2"><p>Para 1.2</p></div>
</div>
</div>
<div class="wrap">
<h1 class="showcontent" id="2">Title 2</h1>
<div class="content" id="content2">
<h3 id="sub3">Sub 2.1</h3>
<div class="sub" id="Xsub3"><p>Para 2.1</p></div>
<h3 id="sub4">Sub 2.2</h3>
<div class="sub" id="Xsub4"><p>Para 2.2</p></div>
</div>
</div>
<div class="wrap">
<h1 class="showcontent" id="3">Title 3</h1>
<div class="content" id="content3">
<h3 id="sub5">Sub 3.1</h3>
<div class="sub" id="Xsub5"><p>Para 3.1</p></div>
<h3 id="sub6">Sub 3.2</h3>
<div class="sub" id="Xsub6"><p>Para 3.2</p></div>
</div>
</div>
JQuery的
$(document).ready(function(){
$(".showcontent").click(function () {
var name = $(this).attr('id');
$("#content" + name).fadeIn(1000);
});
$(".content h3").click(function () {
var sub = $(this).attr('id');
$("#X" + sub).slideDown(500);
});
});
我们的想法是,在显示当前内容之前,您必须隐藏所有其他内容
并且您可以在不使用ID的情况下执行此操作,尤其是如果您拥有大量内容,则使用类更合适
同样的事情适用于内在的内容
$(document).ready(function() { $(".showcontent").click(function() { $(".content").hide(); $(this).next(".content").fadeIn(1000); }); $(".content h3").click(function() { $(".sub").slideUp(500); $(this).next(".sub").slideDown(500); }); });
.sub { display: none; } .content { display: none; } h1 { cursor: pointer; } h1:hover { color: blue; } h3 { cursor: pointer; } h3:hover { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <h1 class="showcontent" id="1">Text 1</h1> <div class="content" id="content1"> <h3 id="sub1">Sub 1.1</h3> <div class="sub" id="Xsub1"> <p>Para 1.1</p> </div> <h3 id="sub2">Sub 1.2</h3> <div class="sub" id="Xsub2"> <p>Para 1.2</p> </div> </div> </div> <div class="wrap"> <h1 class="showcontent" id="2">Title 2</h1> <div class="content" id="content2"> <h3 id="sub3">Sub 2.1</h3> <div class="sub" id="Xsub3"> <p>Para 2.1</p> </div> <h3 id="sub4">Sub 2.2</h3> <div class="sub" id="Xsub4"> <p>Para 2.2</p> </div> </div> </div> <div class="wrap"> <h1 class="showcontent" id="3">Title 3</h1> <div class="content" id="content3"> <h3 id="sub5">Sub 3.1</h3> <div class="sub" id="Xsub5"> <p>Para 3.1</p> </div> <h3 id="sub6">Sub 3.2</h3> <div class="sub" id="Xsub6"> <p>Para 3.2</p> </div> </div> </div>
你只需要在javascript中实现这一点,只需单击隐藏相关的类,然后只显示单击的一个:
(您可以使用.fadeout而不是.hide,具体取决于您的偏好)
$(document).ready(function() {
$(".showcontent").click(function() {
var name = $(this).attr('id');
$(".content").hide();
$("#content" + name).fadeIn(1000);
});
$(".content h3").click(function() {
var sub = $(this).attr('id');
$(".sub").hide();
$("#X" + sub).slideDown(500);
});
});
有很多方法可以实现这一目标。 一种是在var中保存当前打开的id,并在打开另一个div时关闭它:
$(document).ready(function(){ //hide all content $("[id^=content]").hide(); var currentShown = -1; $(".showcontent").click(function () { var name = $(this).attr('id'); if (currentShown == name) return; //hide currently shown $("#content" + currentShown).fadeOut(1000); $("#content" + name).fadeIn(1000); currentShown = name; }); $(".content h3").click(function () { var sub = $(this).attr('id'); $("#X" + sub).slideDown(500); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <h1 class="showcontent" id="1">Text 1</h1> <div class="content" id="content1"> <h3 id="sub1">Sub 1.1</h3> <div class="sub" id="Xsub1"><p>Para 1.1</p></div> <h3 id="sub2">Sub 1.2</h3> <div class="sub" id="Xsub2"><p>Para 1.2</p></div> </div> </div> <div class="wrap"> <h1 class="showcontent" id="2">Title 2</h1> <div class="content" id="content2"> <h3 id="sub3">Sub 2.1</h3> <div class="sub" id="Xsub3"><p>Para 2.1</p></div> <h3 id="sub4">Sub 2.2</h3> <div class="sub" id="Xsub4"><p>Para 2.2</p></div> </div> </div> <div class="wrap"> <h1 class="showcontent" id="3">Title 3</h1> <div class="content" id="content3"> <h3 id="sub5">Sub 3.1</h3> <div class="sub" id="Xsub5"><p>Para 3.1</p></div> <h3 id="sub6">Sub 3.2</h3> <div class="sub" id="Xsub6"><p>Para 3.2</p></div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.