如果另一个 h2 选择关闭当前一个，我如何一次显示一个 h2？
Posted
技术标签:
【中文标题】如果另一个 h2 选择关闭当前一个，我如何一次显示一个 h2？【英文标题】：How I can show one h2 at a time, if another h2 selected close current one? 【发布时间】：2021-02-11 13:57:45 【问题描述】：我试图一次只打开一个 h2 元素。如果我已经打开了一个，然后单击另一个，则前一个应该隐藏起来。我尝试创建一个数组并使用 for 循环来检查每个 h2 元素是否打开。我的 for 循环只检查一个 h2 而不是所有 3 个我如何修复它并一次只保持一个打开。
这是我的代码 sn-p：
"use strict";
var $ = function(id) return document.getElementById(id); ;
// the event handler for the click event of each h2 element
var toggle = function()
var h2 = this; // clicked h2 tag
var div = h2.nextElementSibling; // h2 tag's sibling div tag
var hello = document.getElementsByTagName("h2");
// toggle plus and minus image in h2 elements by adding or removing a class
if (h2.hasAttribute("class"))
h2.removeAttribute("class");
else
h2.setAttribute("class", "minus");
// toggle div visibility by adding or removing a class
if (div.hasAttribute("class"))
div.removeAttribute("class");
else
div.setAttribute("class", "open");
for(var i = 0; i < hello.length; i++ )
if(div.hasAttribute("class")===false)
alert("false");
else
alert(div[i]);
;
window.onload = function()
// get the h2 tags
var faqs = $("faqs");
var h2Elements = faqs.getElementsByTagName("h2");
// attach event handler for each h2 tag
for (var i = 0; i < h2Elements.length; i++ )
h2Elements[i].onclick = toggle;
// set focus on first h2 tag's <a> tag
h2Elements[0].firstChild.focus();
;*
margin: 0;
padding: 0;
body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
border: 3px solid blue;
padding: 15px 25px;
h1
font-size: 150%;
h2
font-size: 120%;
padding: .25em 0 .25em 25px;
cursor: pointer;
background: url(images/plus.png) no-repeat left center;
h2.minus
background: url(images/minus.png) no-repeat left center;
a
color: black;
text-decoration: none;
a:focus, a:hover
color: blue;
div
display: none;
div.open
display: block;
ul
padding-left: 45px;
li
padding-bottom: .25em;
p
padding-bottom: .25em;
padding-left: 25px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FAQs</title>
<link rel="stylesheet" href="main.css">
<script src="faqs.js"></script>
</head>
<body>
<main id="faqs">
<h1>javascript FAQs</h1>
<h2><a href="#" >What is JavaScript?</a></h2>
<div>
<p>JavaScript is a is a browser-based programming language
that makes web pages more responsive and saves round trips to the server.
</p>
</div>
<h2><a href="#">What is jQuery?</a></h2>
<div>
<p>jQuery is a library of the JavaScript functions that you're most likely
to need as you develop websites.
</p>
</div>
<h2><a href="#">Why is jQuery becoming so popular?</a></h2>
<div>
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>
</body>
</html>【问题讨论】：
请为您的代码创建一个有效的 sn-p。（在此处使用代码编辑器或 jsfiddle）。因为我们不知道 BinDecConv.js 或 BinDecConv.css 感谢您让我知道我添加了我的代码的工作 sn-p。 【参考方案1】：因为有 jquery 标签，所以我使用 jquery 给出一个非常简单的代码：
$('h2').click(function()
$('h2').removeClass('minus');
$('div').removeClass('open');
$(this).addClass('minus');
$(this).next('div').addClass('open');
);
工作sn-p：
$('h2').click(function()
$('h2').removeClass('minus');
$('div').removeClass('open');
$(this).addClass('minus');
$(this).next('div').addClass('open');
);*
margin: 0;
padding: 0;
body
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
border: 3px solid blue;
padding: 15px 25px;
h1
font-size: 150%;
h2
font-size: 120%;
padding: .25em 0 .25em 25px;
cursor: pointer;
background: url(images/plus.png) no-repeat left center;
h2.minus
background: url(images/minus.png) no-repeat left center;
a
color: black;
text-decoration: none;
a:focus, a:hover
color: blue;
div
display: none;
div.open
display: block;
ul
padding-left: 45px;
li
padding-bottom: .25em;
p
padding-bottom: .25em;
padding-left: 25px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FAQs</title>
<link rel="stylesheet" href="main.css">
<script src="faqs.js"></script>
</head>
<body>
<main id="faqs">
<h1>JavaScript FAQs</h1>
<h2><a href="#" >What is JavaScript?</a></h2>
<div>
<p>JavaScript is a is a browser-based programming language
that makes web pages more responsive and saves round trips to the server.
</p>
</div>
<h2><a href="#">What is jQuery?</a></h2>
<div>
<p>jQuery is a library of the JavaScript functions that you're most likely
to need as you develop websites.
</p>
</div>
<h2><a href="#">Why is jQuery becoming so popular?</a></h2>
<div>
<p>Three reasons:</p>
<ul>
<li>It's free.</li>
<li>It lets you get more done in less time.</li>
<li>All of its functions are cross-browser compatible.</li>
</ul>
</div>
</main>
</body>
</html>注意：- 确保添加 jQuery 库以使此代码运行。
【讨论】：
以上是关于如果另一个 h2 选择关闭当前一个，我如何一次显示一个 h2？的主要内容，如果未能解决你的问题，请参考以下文章
iphone app - 如何只获取一次当前位置并将其存储以用于另一个功能？