在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')
    });
 
    // please change above
  </script>
</div> 

Answer 1

总之，当单击anywhere时，您需要隐藏所有其他的，然后只显示您单击的链接。

检查下面的代码

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>

Answer 2

应该给文档对象一个单击事件侦听器。使用contains()函数，每次单击就可以确定单击的元素是否在目标元素之外。如果单击的元素位于外部，则隐藏原始元素。