用js点击按钮时如何显示div? [英] How to display a div when clicking on a button with js?
问题描述
-也许这个问题是我从另一个答案中提取的重复问题选项之一"
我想要做的是,当单击文章标签的按钮(它是一个示例)时,会显示带有该文章特定信息的 div,并且该按钮会更改徽标.关键是如果点击那个按钮,另一篇文章的另一个div不能同时显示
图片更好地解释了它们:
首先应该是这个样子
这是点击按钮时的样子
点击另一个按钮时应该会看到这一点:
(这就是它在手机上的样子,这很重要,因为我将要展示的代码)
这是我发现的一个代码,它或多或少有效,但是当它是例如手机或想要包含更多文章时它会失败:
var sharedCont = document.getElementById('shared-container');var allCont = document.querySelectorAll('#accordion-container');var jsaccordion = {初始化:函数(目标){var headers = document.querySelectorAll("#" + target + " .accordion-btn");if (headers.length > 0) { for (var head of headers) {head.addEventListener("click", jsaccordion.select);}}},选择:函数(){var targ1 = this.parentElement.closest('#accordion-container'),//找到父元素targText = targ1.querySelector('.accordion-text').innerHTML;//获取共享容器的文本if( targ1.classList.contains('active') ){//当点击时,如果处于活动状态,将它们全部重置targ1.classList.remove('active');sharedCont.innerHTML = '';sharedCont.classList.remove('active');} 别的 {//当点击时,将它们全部重置,然后激活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('加载', function(){jsaccordion.init("手风琴容器");});
body {最大宽度:90%;边距:0 自动;溢出:隐藏;}#手风琴容器{位置:相对;}#accordion-container 按钮::before {内容:'+'!重要;}#accordion-container.active button::before {内容:'-'!重要;}#accordion-container.active::after {内容: '';宽度:0;高度:0;border-left:15px 实心透明;border-right: 15px 实心透明;边框底部:15px 纯橙色;位置:绝对;底部:-2rem;左:50%;变换:translateX(-50%);颜色为橙色;z-索引:100;字体大小:3rem;行高:1;}#accordion-container .accordion-text {显示:无;颜色:#808080;填充:15px;边框:1px 实心 #ffcc4b;}/* .accordion-btn.open + .accordion-text{显示:块;} */#共享容器{边距顶部:2rem;显示:块;宽度:100%;填充:2rem;边框:1px纯橙色;显示:无;}#shared-container.active {显示:块;文本对齐:居中;}#shared-container p {边距:0;}
<html lang="zh-cn"><头><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文档</title>头部><身体><h1>测试 测试 测试</h1><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/><div id="accordion-container" class='col-6'><div class="my-3"><h3 class=" text-center">第一个</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 坐 amet consectetur adipiscing.Maecenas pharetra convallis posuere morbi leo urna moestie.Nullam vehicula ipsum a arcu.Gravida cum sociis natoque penatibus et magnis.Duis convallis convallistellus id interdum velit laoreet.</p>
<div id="accordion-container" class='col-6'><div class="my-3"><h3 class='text-center'>第二个</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 居民 morbi tristique senectus 等.Nisl vel pretium lectus quam id leo.</p>