单击另一个 div 时显示 div答案

【问题标题】：Display div when clicking on another div单击另一个 div 时显示 div
【发布时间】：2016-12-17 20:59:40
【问题描述】：

我添加了三张图片。请看看他们。

创建这样的东西的最佳解决方案是什么？我会在每一行之后创建一个大容器，然后这个容器被折叠起来。单击 3 个重叠容器之一后，我将用文本填充容器并显示它。但是当显示器不能连续显示 3 个 div 时会发生什么，因为我将使用弹性框？有更少的 jquery 更好的解决方案吗？

【问题讨论】：

最佳解决方案：花时间尝试CSS 或者做一些研究。

标签： javascript jquery html css

【解决方案1】：

添加一个 div 并将其显示设置为隐藏。获取特定 div 的 onclick 事件并将 display 属性设置为 block

window.addEventListener("load", function(){
     document.getElementById("click").onclick = function(){
       document.getElementById("div-1").style.display = "block";
     };
});

.row
{
    width:100%;
}

.one-third
{  
  width:33.33333%;
  float:left;
  padding:30px 0;

}

.full-width
{
  display:none;
  width:100%;
  text-align:center;
}

<div class=wrap>
  <div class="row">
    <div id="click" class="one-third">
      Column 1-Click Me
      </div>
     <div class="one-third">
      Column 2  
    </div>
     <div class="one-third">
       Column 3
      </div>
    </div>
<div class="full-width" id="div-1">Full width Div</div>
 
  <div class="row">
    <div class="one-third">
      Column 1
      </div>
     <div class="one-third">
       Column 2
      </div>
     <div class="one-third">
       Column 3
      </div>
    </div>

【讨论】：

【解决方案2】：

你可以使用javascript来解决这个问题，像这样...... html代码：

<div id="a"> 
  <a href="#e" onclick="goB()"><h3>wellcome</h3></a>

</div>
<div id="b">
  <a href = "#er" onclick="goA"> <h3>hello...</h3> </a>
</div>

外部文件中的javascript代码

function goB()
{
  document.getElementById("a").style.display="none";
  document.getElementById("b").style.display="block";
}
function 
{
  document.getElementById("b").style.display="none";
  document.getElementById("a").style.display="block";
}

【讨论】：

【解决方案3】：

也许这样的事情是一个很好的起点： https://jsfiddle.net/547ec3bx/

HTML

<div class="wrapper">
  <div class="row">
    <div class="element">
    </div>
    <div class="element">
    </div>
    <div class="element">
    </div>
  </div>
  <div class="row">
    <div class="element">
    </div>
    <div class="element">
    </div>
    <div class="element">
    </div>
  </div>
  <div class="row">
    <div class="element">
    </div>
    <div class="element">
    </div>
    <div class="element">
    </div>
  </div>
</div>

Javascript

document.querySelectorAll('.row').forEach((element, index) => {
  element.style.order = index * 2;
});

document.querySelectorAll('.element').forEach(element => {
  element.addEventListener('click', event => {
    var newRow = document.createElement('div');
    newRow.classList.add('row');
    newRow.style.order = +event.currentTarget.parentNode.style.order + 1;
    var newElement = document.createElement('div');
    newElement.classList.add('element');
    newRow.appendChild(newElement);
    event.currentTarget.parentNode.parentNode.appendChild(newRow);
  });
});

CSS

.element {
  min-width: 100px;
  height: 50px;
  flex: 1;
  border: 1px solid black;
  flex-wrap: nowrap;
}

.row {
  width: 350px;
  display: flex;
  flex-direction: row;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

【讨论】：