javascript - 单击多个 ID 时显示/隐藏文本
问题描述
当我单击标题时,我想显示/隐藏切换我正在处理的项目上显示的文本。当我单击标题时,我设法显示了内容,但我无法隐藏我当时不需要显示的内容。这个想法是,如果我单击标题 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>
推荐阅读
- kdb - 迭代 (/) 多价函数
- facebook-graph-api - 如何访问我自己的非商业 Instagram 帐户的数据?
- avr - 带中断的 Atmega168 USART 发送器
- javascript - 如何打开多个 WebSocket 流
- hyperledger-fabric - Hyperledger 结构:无法在 chainecode_example02 中调用链代码?
- c++ - 在 Windows 上以 Ubuntu 为目标时,如何在 C++ Visual Studio Linux 项目中包含 ncurses.h 库?
- node.js - 如何在循环中向不同的对话流代理发送单个请求?
- python - NoReverseMatch at /accounts/password-reset/ 用于 Django 中的密码重置
- javascript - 如何更正此缓存功能
- c# - 如何让 TextBox 监听 INotifyPropertyChanged