當我單擊 Javascript 中另一個按鈕的內容時，如何關閉一個按鈕內容

Question

我的問題是我有一個網站，使用 javascript 當我點擊關於我時它打開了，但是當我點擊教育和成就時，關於我按鈕的內容保持打開並且教育內容重疊它。 我想這樣做，以便當我單擊另一個按鈕時，第一個按鈕會關閉（它的內容。網站名稱是 dirieahmed.ml

我的代碼 HTML 和 JS 將在下面鏈接，如果需要，稍后會添加 CSS。

<div class="container">
  <button id="one" class="click one">About Me</button>
  <div class="list-1 sec">
    <h1 class="content-header-one content">Dummy text header</h1>
    <p class="content-paragraph-one">Dummy text</p>
  </div>
  <button class="click two">Education and Achivements</button>
  <div class="list-2 sec">
    <p class="content-paragraph2 content">Dummy text</p>
    <ul class="content-list content">
      <li>- Achivement #1</li>
      <li>- Achivement #2</li>
      <li>- Achivement #3</li>
    </ul>
  </div>
  <button class="click three" >Other</button>
  <div class="list-3 sec">
    <h1 class="content-header-two content">Dummy text header</h1>
    <p class="content-paragraph3 content">Dummy text</p>
  </div>
  <script async>
    let one = document.querySelector('.one');
    let two = document.querySelector('.two');
    let three = document.querySelector('.three');
    let list1 = document.querySelector('.list-1');
    let list2 = document.querySelector('.list-2');
    let list3 = document.querySelector('.list-3');
      one.addEventListener("click", ()=>{
        list1.classList.toggle('newlist');  
    });
    two.addEventListener("click", ()=>{
        list2.classList.toggle('newlist');
        lis
    })
    three.addEventListener("click", ()=>{
        list3.classList.toggle('newlist')
    });
 
    // you gotta chnage this
// change above
  </script>
</div> 

Answer 1

文檔object 應該被賦予一個點擊事件監聽器。 使用contains() function 來確定每次點擊時點擊的元素是否在目標元素之外。 如果單擊的元素在外部，則隱藏原始元素。

Answer 2

總而言之，您需要在任何地方單擊時隱藏所有其他鏈接，然后僅顯示基於您單擊的鏈接的鏈接

檢查下面的代碼

https://codesandbox.io/s/keen-driscoll-igzlwb?file=/index.html:2333-3356

     <script async>
        // Instanciate List div's
        let list1 = document.querySelector(".list-1");
        let list2 = document.querySelector(".list-2");
        let list3 = document.querySelector(".list-3");

        // Reset's all views to the default without .newlist
        const resetAllViews = () => {
          list1.classList.remove("newlist");
          list2.classList.remove("newlist");
          list3.classList.remove("newlist");
        };

        // Checks to see what button is clicked and shows correct list based on input
      document.addEventListener(
        "click",
        function (e) {
          e = e || window.event;
          var target = e.target;
          if (target.classList.contains("one")) {
            resetAllViews();
            list1.classList.add("newlist");
          }
          if (target.classList.contains("two")) {
            resetAllViews();
            list2.classList.add("newlist");
          }
          if (target.classList.contains("three")) {
            resetAllViews();
            list3.classList.add("newlist");
          }
        }, false);

      </script>