单击另一个 div 时显示 div

Posted 2023-03-05

【中文标题】单击另一个 div 时显示 div

【英文标题】：Display div when clicking on another div

【发布时间】：2016-12-17 20:59:40

【问题描述】：

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

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

【问题讨论】：

最佳解决方案：花时间尝试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;