使您单击块中的项目时，会出现另一个块（每个块都有自己的块）

Question

[有一个主单元具有3格。您需要单击每个div来打开其内容，并且将主块与内部块一起关闭。换句话说，只有打开的块才能通过单击保留在页面上。我不知道该怎么实现。特别是要为此div打开内容，而不是全部。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS96eFJEcy5wbmcifQ==” alt =“在此处输入图像描述”>

我试图在图片中解释所有内容。

Answer 1

这是您要寻找的吗？ repro on Stackblitz

如果您无法访问stackblitz，请参见以下代码：

import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import "./style.css";

const App = () => {
  // Hide/show main blocks
  const commonAction = () => {
    document.getElementById("container").classList.toggle("flex-col");
    Array.from(document.getElementsByClassName("block")).forEach(el => {
      el.classList.toggle("hidden");
    });
  };

  // On click on the main block
  const enlarge = e => {
    commonAction();

    // Just show the one we clicked
    e.target.classList.remove("hidden");
    // Enlarge it
    e.target.classList.add("enlarge");
    // show/hide its details
    e.target.childNodes[1].classList.toggle("hidden");
  };

  // On click on the details
  const hide = e => {
    // Hide it
    e.target.classList.add("hidden");
    // reset main blocks to their original state
    commonAction();
    //reset main clicked block to its normal state
    const parent = e.target.closest(".block");
    parent.classList.remove("hidden");
    parent.classList.remove("enlarge");

    e.stopPropagation();
  };

  return (
    <>
      <div id="container">
        <div className="block" onClick={enlarge}>
          Content 1
          <div className="block-content hidden" onClick={hide}>
            Content details 1
          </div>
        </div>
        <div className="block" onClick={enlarge}>
          Content 2
          <div className="block-content hidden" onClick={hide}>
            Content details 2
          </div>
        </div>
        <div className="block" onClick={enlarge}>
          Content 3
          <div className="block-content hidden" onClick={hide}>
            Content details 1
          </div>
        </div>
      </div>
    </>
  );
};

render(<App />, document.getElementById("root"));

css：

#container {
  display: flex;
  justify-content: space-between;
  height: 200px;
}

.flex-col{
  flex-direction: column;
}

#container > * {
  position: relative;
  min-width: 25%;
  background-color: #6dd4fd;
}

.block-content {
  position: absolute;
  background-color: #ffb35c;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

.hidden{
  visibility: hidden;
  height:0px !important;
}

.enlarge{
  width: 100% !important;
  height: 100% !important;
  display: block;
}