每次只能顯示/隱藏div

-1

此代碼是FAQ的未觸動版本，包含三個可單擊顯示或隱藏的答案。我的任務是修改一次只顯示一個答案（其他兩個必須關閉）。我得到了一個提示，使用for循環來檢查數組中的h2元素，並刪除所有不是被單擊的h2元素的class屬性。謝謝每次只能顯示/隱藏div

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

來源

2017-01-28 Pappricot

設計第一，代碼第二！在設計中，您需要考慮點擊h2元素中的鏈接是否導航到另一個頁面，如果用戶單擊已打開的答案時該做什麼，您是否需要處理兩個以上的h2元素，以及if那麼，爲什麼不是'onload'函數內的click處理程序，它可以訪問h2元素的集合。祝你的作業:) – traktor53

謝謝:)我會確保在編碼之前編寫僞代碼）） – Pappricot

像下面可能做的伎倆假設你現有的腳本/標記當前工作。沒有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>

來源

2017-01-28 02:04:37 Brian

你的代碼產生錯誤 –

對不起，我不應該使用一個實時代碼片段 - 它會產生一個錯誤，因爲沒有一個存在DOM元素，這意味着'h2Elements'和'faqs'不會返回任何有用的內容，'faq.getElementswByTagName（）'將失敗。如果您可以請爲您的腳本提供HTML和CSS，我將更新答案以使其功能 – Brian

謝謝Brian！我現在將發佈腳本的HTML和CSS。對不起，延遲迴復。 – Pappricot

HTML的腳本：

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

和CSS腳本：

* { 
    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; 
}

來源

2017-01-28 21:43:43 Pappricot

每次只能顯示/隱藏div

回答

相關問題