用js点击按钮时如何显示div? [英] How to display a div when clicking on a button with js?

查看：36
本文介绍了用js点击按钮时如何显示div?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

-也许这个问题是我从另一个答案中提取的重复问题选项之一"

我想要做的是，当单击文章标签的按钮(它是一个示例)时，会显示带有该文章特定信息的 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>

<div id="共享容器"></div></html>

我再说一遍，这取自这个问题:如何用JS在按钮点击时显示不同的div?

我是个新手，但我喜欢那个问题的想法，想知道是否有可能做到.

解决方案 

var jsaccordion = {初始化:函数(目标){var headers = $("." + target + ".accordion-btn");如果(标题.长度){headers.on('click', jsaccordion.select);}},选择:函数(){var tar = $(this).closest('.accordion-container');$('#shared-container').remove();如果 (tar.hasClass('active')) {tar.removeClass('活动')} 别的 {$('.active').removeClass('active')tar.addClass('活动');var targText = tar.find('.accordion-text').html();var sharedCont = "
"+ targText + "</div>";if($('body').width() > 768){tar = tar.parent();}tar.after(sharedCont);}}}window.addEventListener('load', function() {jsaccordion.init("手风琴容器");});

body {最大宽度:90%；边距:0 自动；}.accordion 容器 {位置:相对；}.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;}#共享容器{边距顶部:2rem；显示:块；宽度:100%；填充:2rem；边框:1px纯橙色；文本对齐:居中；}#shared-container p {边距:0；}@media(最大宽度:768px){.col-6{最大宽度:100%；最小宽度:100%；}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><身体><h1>测试 测试 测试</h1><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div 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 molestie.Nullam vehicula ipsum a arcu.Gravida cum sociis natoque penatibus et magnis.杜伊斯康瓦利斯convallistellus id interdum velit laoreet.</p>

<div 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>

-"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. The point is that if that button is clicked, another div from another article cannot be displayed at the same time

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?

I am very newbie, but I liked the idea of ​​that question and wanted to know if it is possible to do it.

解决方案 

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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆