用js点击按钮时如何显示div？

Question

-"Maybe this question is one of the duplicate question options as I took it from another answer" -“也许这个问题是我从另一个答案中提取的重复问题选项之一”

What I am trying to do is that when clicking on a button of an article tag (it is an example) a div with specific information of that article is shown and that the button changes logo.我想要做的是，当单击文章标签的按钮（它是一个示例）时，会显示带有该文章特定信息的 div，并且该按钮会更改徽标。 The point is that if that button is clicked, another div from another article cannot be displayed at the same time关键是如果点击那个按钮，另一篇文章的另一个div不能同时显示

The images explain them better:这些图像更好地解释了它们：

This is how it should look at first这就是它最初的样子

This is what it should look like when the button is clicked这是单击按钮时的样子

And this should be seen when clicking on the other button:单击另一个按钮时应该会看到这一点：

(This is how it should look on a cell phone, that's important because of the code I'm going to show) （这就是它在手机上的样子，这很重要，因为我要展示的代码）

And this is a code that I found and that more or less works, but it fails when it is for example a cell phone or when wanting to include more articles:这是我发现的一个代码，它或多或少地起作用，但是当它是例如手机或想要包含更多文章时它会失败：

 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>

I repeat, that is taken from this question: how to display different div on button click with JS?我再说一遍，这是从这个问题中提取的：如何使用 JS 在按钮单击时显示不同的 div？

I am very newbie, but I liked the idea of that question and wanted to know if it is possible to do it.我是个新手，但我喜欢那个问题的想法，想知道是否有可能做到。

Answer 1

 var jsaccordion = { init: function(target) { var headers = $("." + target + " .accordion-btn"); if (headers.length) { headers.on('click', jsaccordion.select); } }, select: function() { var tar = $(this).closest('.accordion-container'); $('#shared-container').remove(); if (tar.hasClass('active')) { tar.removeClass('active') } else { $('.active').removeClass('active') tar.addClass('active'); var targText = tar.find('.accordion-text').html(); var sharedCont = "<div id='shared-container'>" + targText + "</div>"; if($('body').width() > 768){ tar = tar.parent(); } tar.after(sharedCont); } } } window.addEventListener('load', function() { jsaccordion.init("accordion-container"); });

 body { max-width: 90%; margin: 0 auto; } .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; } #shared-container { margin-top: 2rem; display: block; width: 100%; padding: 2rem; border: 1px solid orange; text-align: center; } #shared-container p { margin: 0; } @media (max-width : 768px){ .col-6{ max-width: 100%; min-width: 100%; } }

 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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 class='col-6 accordion-container'> <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 class='col-6 accordion-container'> <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> </body>

用js点击按钮时如何显示div？

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-09-18 16:56:01

用js点击按钮时如何显示div？

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-09-18 16:56:01

解决方案1
2 已采纳 2020-09-18 16:56:01