当我单击 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>