Question

此代码是常见问题解答的未触动版本，由三个答案组成，可在单击时显示或隐藏。我的任务是修改一次只显示一个答案（其他两个必须关闭）。我得到一个提示，使用for循环来遍历数组中的h2元素，并删除所有h2元素的class属性，这些元素不是已被单击的元素。谢谢，

"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




    // 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"); 
    } 
};

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();       
};

Answer 1

假设您现有的脚本/标记当前正在运行，可能会执行以下操作。没有HTML / CSS，我无法测试我的答案。

基本上它只是迭代faq项目，当点击它们并隐藏它们如果它们不是被点击的元素或显示它是否被点击的元素 - 它将不会切换如果相同的元素被点击两次 - 一将永远保持开放。

"use strict";
    var $ = function(id) { return document.getElementById(id); };

    // the event handler for the click event of each h2 element

    window.onload = function() {
        // get the h2 tags
        var faqs = $("faqs");
        var h2Elements = faqs.getElementsByTagName("h2");
      
        function accordionClick(){
           var h2;
           for(var i=0; i < h2Elements.length; i++){
             h2 = h2Elements[i]; 
             if(h2 == this){ // The item we clicked
               if(!h2.hasAttribute("class")){ // If it's open
                 closeItem(h2);
               } else{ // If not 
                 openItem(h2); 
               }
             } else{ // Not the item we clicked so it should be closed
               closeItem(h2);
             }
           }
        }
      
        function openItem(h2){
            var div = h2.nextElementSibling;
            h2.removeAttribute("class")
            div.setAttribute("class", "open");
        }
      
        function closeItem(h2){
            var div = h2.nextElementSibling;
            h2.setAttribute("class", "minus")
            div.removeAttribute("class");
        }
      
        // attach event handler for each h2 tag and init classes     
        for (var i = 0; i < h2Elements.length; i++ ) {
            h2Elements[i].onclick = accordionClick;
            closeItem(h2Elements[i]);
        }

        // 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;
}

<main id="faqs">
        <h1>JavaScript FAQs</h1>
        <h2><a href="#" >What is JavaScript?</a></h2>
        <div>
            <p>JavaScript is a programming language that's built into the major web browsers.
                It 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 web sites.
            </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>

Answer 2

脚本的HTML：

var rows = document.querySelectorAll('tr');
Array.prototype.forEach.call(rows, function(row, index) {
  var first = row.querySelector('.first');
  var second = row.querySelector('.second');
  var result = row.querySelector('.result');

  console.log(first,second,result);

  result.textContent = parseInt(first.textContent)/parseInt(second.textContent);
});

脚本的CSS：

<!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 programming language that's built into the major web browsers.
                It 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 web sites.
            </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>

一次只显示/隐藏一个div

2 个答案: