时间戳

首页 > 解决方案 > 如果另一个 h2 选择关闭当前一个，我如何一次显示一个 h2？

javascript - 如果另一个 h2 选择关闭当前一个，我如何一次显示一个 h2？

问题描述

我试图一次只打开一个 h2 元素。如果我已经打开了一个，然后单击另一个，则前一个应该隐藏起来。我尝试创建一个数组并使用 for 循环来检查每个 h2 元素是否打开。我的 for 循环只检查一个 h2 而不是所有 3 个我如何修复它并一次只保持一个打开。

这是我的代码片段：

"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>

标签： javascriptjqueryarraysfor-loop

解决方案

由于 jquery 标记在那里，所以我使用 jquery 给出了一个非常简单的代码：

$('h2').click(function(){
  $('h2').removeClass('minus');
  $('div').removeClass('open');
  $(this).addClass('minus');
  $(this).next('div').addClass('open');
});

工作片段：

$('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 库以使此代码运行。

推荐阅读