javascript - Css 书籍布局(水平 Accordion )

Question

我正在尝试创建一个带有书籍布局的页面，因此一个带有一些选项卡的页面可以一次展开一个。
这是一个工作示例:https://codesandbox.io/s/book-layout-l28gh?file=/src/App.js:0-1419

import { useState } from "react";

const dataset = [
  { name: "A section", description: "page A" },
  { name: "B section", description: "page B" },
  { name: "C section with long title", description: "page C" },
  { name: "D section", description: "page D" }
];

export default function App() {
  return <Page />;
}

function Page({}) {
  const [openSection, setOpenSection] = useState(0);

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh"
      }}
    >
      {dataset.map((datum, i) => {
        const { name } = datum;
        const isOpen = i === openSection;

        return (
          <div
            key={name}
            style={{
              height: "100%",
              backgroundColor: isOpen ? "white" : "lightgray",
              border: `1px solid ${isOpen ? "white" : "black"}`,
              padding: 10,
              flex: 1,
              flexGrow: isOpen ? 1 : 0,
              transition: "all 2s ease"
            }}
          >
            <div
              style={{
                cursor: "pointer",
                writingMode: isOpen ? "horizontal-tb" : "vertical-rl",
                transition: "all 2s ease"
              }}
              onClick={() => setOpenSection(i)}
            >
              {name}
            </div>
          </div>
        );
      })}
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

如果您对其进行测试，您会发现一些问题:

当您展开一个部分时，标题不会平滑过渡，因为它会从垂直变为水平。应该是平滑的旋转

有时，我不明白什么时候，当您单击标题时，所有卡片似乎彼此靠近。

另一个要求是让灰色区域全部可点击，但打开时很明显是个问题

为什么？有什么问题？有更好的方法来做这样的布局吗？

Answer 1

正如你所说，我解决了你所有的问题。
问题 #1 -> 已解决:
你应该使用 white-space:nowrap .如果您的文本很大，那么在您的框的末尾它将中断到下一行。 white-space:nowrap不要这样。 (我不建议这样做，因为这对于太长的标题文本不利。)
问题 #2 -> 已解决:当您单击某个元素并在操作中间(打开框)单击另一个元素时会发生。这是因为 display: flex和 flexGrow: 1 .
你使用了 flex 盒子和justifyContent: "center" .因此，当您单击并单击另一个时，您的包装会变小，并且所有卡片似乎都彼此靠近。 flexGrow: 1会打破他们。
所以flexGrow: 5是解决方案。
问题 #3 -> 已解决:设置位置错误onClick .你应该设置onClick你的盒子上的事件而不是你的文字。光标的条件就是你想要的。 (元素被选中，所以光标必须是 default 否则必须是 poiner )。
奖金:) 如果你为你的包装设置一个小宽度，那么你的旋转框会更漂亮。它在文本和宾果游戏的开头旋转。

import { useState } from "react";

const dataset = [
  { name: "A section" },
  { name: "B section" },
  { name: "C section with long title" },
  { name: "D section" },
  { name: "E section" },
];

function Page() {
  const [openSection, setOpenSection] = useState(1);

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
      }}
    >
      {dataset.map((datum, i) => {
        const { name } = datum;
        const isOpen = i === openSection;
        return (
          <div
            key={name}
            onClick={() => setOpenSection(i)}
            style={{
              height: "100%",
              backgroundColor: isOpen ? "white" : "lightgray",
              border: `1px solid ${isOpen ? "white" : "black"}`,
              padding: "20px 30px",
              flex: 1,
              flexGrow: isOpen ? 5 : 0,
              transition: "all 1s linear",
              boxSizing: "border-box",
              cursor: openSection !== i ? 'pointer' : 'default',

              "&:first-child": {
                left: 0,
              },

              "&:last-child": {
                right: 0,
              },
            }}
          >
            <div
              style={{
                transform: `rotate(${isOpen ? "0" : "90"}deg)`,
                transition: "all 1s linear",
                width: 1,
                whiteSpace: "nowrap",
              }}
            >
              {name}
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default Page;