javascript - 如何使用JS在按钮单击时显示不同的div？

Question

我正在尝试制作一个有 2 张卡片的部分，每张卡片都有一个按钮和一个小的描述性文字。
我想要实现的是，当我单击按钮时，会发生 3 件事:
1 按钮更改内容，从“+”变为“-”，但这是我最不担心的。
2 显示一个 div 与该卡对应的信息，占用 100 vw
和
3、如果有显示的div，点击另一张卡上的另一个按钮，第一个div消失，第二个出现，占用100vw
-----我在用什么？我正在使用 HTML5、CSS、Vanilla Js、Bootstrap(主要用于 css)-----
这就是我想要实现的目标:



这就是我所取得的成就:

var jsaccordion = {
    init : function (target) {  
      var headers = document.querySelectorAll("#" + target + " .accordion-btn");
      if (headers.length > 0) { for (var head of headers) {
        head.addEventListener("click", jsaccordion.select);
      }}
    },

    select : function () {        
      this.classList.toggle("open");
    }
  };
  window.addEventListener('load', function(){
    jsaccordion.init("accordion-container");
  });

.accordion-text {
  display: none;
  color: #808080;
  padding: 15px;
  border: 1px solid #ffcc4b;
}
.accordion-btn.open + .accordion-text{
  display: block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class='row'>
<div id="accordion-container" class='col-6'>
    <div class="my-3">
      <h3 class=" text-center">First one</h3>
      <button class='mx-auto d-block accordion-btn btn btn-white border-primary'>+</button>
         <div class="accordion-text">
            <p>
some specific and special information for the first div.</p>
         </div>
     </div>
</div>
           
<div id="accordion-container" class='col-6'>
    <div class="my-3">
      <h3 class='text-center'>second one</h3>
       <button class='mx-auto d-block accordion-btn btn btn-white border-primary'>+</button>
        
         <div class="accordion-text">
            <p>some specific and special information for the second div.</p>
         </div>
     </div>
</div>
          
</div>

请帮帮我，我不知道该怎么做

Answer 1

在 jQuery 中做到这一点要容易得多，但这里是我将如何使用 Vanilla JS 来处理它。

这个想法是，将既不基于元素，更基于浏览器窗口的内容居中，就是使用共享容器(在任一元素之外)进行打印。这也消除了定位的猜测工作。

单击按钮时，应从 Accordion 复制信息，并打印到目标容器。同样在该单击上，检查另一个是否处于事件状态以删除 active类(class)。向事件容器添加类以更改按钮符号 +和 - , 使用 CSS 伪元素。

将箭头放在 Accordion 容器内还可以更容易地根据它所在的 HTML 元素定位它们。

旁注:您应该在整个页面上只使用一次 HTML ID，否则为多个实例使用一个类。这是引用#accordion-container .

var sharedCont = document.getElementById('shared-container');
var allCont = document.querySelectorAll('#accordion-container');

var jsaccordion = {
    init : function (target) {  
        var headers = document.querySelectorAll("#" + target + " .accordion-btn");
        if (headers.length > 0) { for (var head of headers) {
            head.addEventListener("click", jsaccordion.select);
        }}
    },

    select : function () {        
        var targ1 = this.parentElement.closest('#accordion-container'), // find parent
            targText = targ1.querySelector('.accordion-text').innerHTML; // grab text for shared container

        if( targ1.classList.contains('active') ){ 

            // when clicked, if active, reset them all
            targ1.classList.remove('active');
            sharedCont.innerHTML = '';
            sharedCont.classList.remove('active');

        } else {
            // when clicked, reset them all, then activate
            for (let i = 0; i < allCont.length; i++) {
                var el = allCont[i];
                el.classList.remove('active');
            }

            targ1.classList.add('active');
            sharedCont.innerHTML = targText;
            sharedCont.classList.add('active');

        }
    }
};
window.addEventListener('load', function(){
    jsaccordion.init("accordion-container");
});

body {
    max-width: 90%;
    margin: 0 auto;
    overflow: hidden;
}
#accordion-container {
    position: relative;
}
#accordion-container button::before {
    content: '+' !important;
}
#accordion-container.active button::before {
    content: '-' !important;
}
#accordion-container.active::after {
    content: '';
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid orange;
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    color: orange;
    z-index: 100;
    font-size: 3rem;
    line-height: 1;
}
#accordion-container .accordion-text {
    display: none;
    color: #808080;
    padding: 15px;
    border: 1px solid #ffcc4b;
}
/* .accordion-btn.open + .accordion-text{
    display: block;
} */

#shared-container {
    margin-top: 2rem;
    display: block;
    width: 100%;
    padding: 2rem;
    border: 1px solid orange;
    display: none;
}
#shared-container.active {
    display: block;
    text-align: center;
}
#shared-container p {
    margin: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Testing testing testing</h1>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class='row'>
        <div id="accordion-container" class='col-6'>
            <div class="my-3">
            <h3 class=" text-center">First one</h3>
            <button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
                <div class="accordion-text">
                    <p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis natoque penatibus et magnis. Duis convallis convallis tellus id interdum velit laoreet. </p>
                </div>
            </div>
        </div>
                
        <div id="accordion-container" class='col-6'>
            <div class="my-3">
            <h3 class='text-center'>second one</h3>
            <button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
                
                <div class="accordion-text">
                    <p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium lectus quam id leo.</p>
                </div>
            </div>
        </div>
                
    </div>
    <div id="shared-container"></div>
</body>
</html>