手风琴扩展卡与反应和css

Question

我试图使这张卡在这样一种方式，当你点击查看详细信息，卡的蓝色页脚应该在高度展开，并显示lorem文本，然后点击另一张卡，前一张卡将崩溃。问题是当我点击view details时，卡的蓝色底部不会随着lorem而扩展。这是我的沙盒:https://codesandbox.io/s/wonderful-bohr-by01z?file=/src/App.js

App.js:

import { Card, Footer, Header } from "./styles";
import { useState } from "react";
export default function App() {
const [expanded, setExpanded] = useState(false);
return (
<>
<Card>
<Header>last viewed: {null}</Header>
<Footer>
<span onClick={() => setExpanded(!expanded)}>View Details</span>
{expanded && (
<div className="accodion">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos,
facilis. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Eos, facilis. Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Eos, facilis. Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Eos, facilis.
</div>
)}
</Footer>
</Card>
</>
);
}

styles.js:

import styled from "styled-components";
const Card = styled.div`
background-color: ${({ isEmpty }) => (isEmpty ? "#FAFAFA" : "white")};
height: 100%;
border-radius: 20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
overflow: hidden;
margin: 8px;
`;
const DropDown = styled.div`
background-color: lightblue;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
`;
const Header = styled.div`
display: flex;
justify-content: space-between;
margin-top: -40;
font-size: 10px;
color: #7894b0;
margin: 16px;
`;
const Footer = styled.div`
background-color: rgb(242, 247, 251);
width: 100%;
height: 50px;
font-size: 12px;
line-height: 12px;
color: #4f4f4f;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
cursor: pointer;
.accodion {
padding: 30px;
}
`;
export { Card, Header, Footer, DropDown };

Answer 1

解决方案需附加开关类。显示并获取当前页脚useRef的高度还添加了第二个useState，它将保持整个页脚高度。沙箱示例

Styled-components

const Card = styled.div`
background-color: ${({ isEmpty }) => (isEmpty ? '#FAFAFA' : 'white')};
height: 100%;
border-radius: 20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
overflow: hidden;
margin: 8px;
`;
const DropDown = styled.div`
background-color: lightblue;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
`;
const Header = styled.div`
display: flex;
justify-content: space-between;
margin-top: -40;
font-size: 10px;
color: #7894b0;
margin: 16px;
`;
const Footer = styled.div`
background-color: rgb(242, 247, 251);
width: 100%;
height: 35px; /* changed */
font-size: 12px;
line-height: 12px;
color: #4f4f4f;
display: flex;
/* justify-content: center; */
flex-direction: column;
align-items: center;
cursor: pointer;
transition: all 0.3s ease-in-out; /* added */
overflow: hidden; /* added */
span {
padding: 12px 0;
}
.accodion {
padding: 10px 15px 15px; /* changed */
}
&.show {
height: ${({ setHeight }) => setHeight}px;
}
`;

App.js

import { Card, Footer, Header } from "./styles";
import { useState, useEffect, useRef } from "react";
export default function App() {
const [expanded, setExpanded] = useState(false);
const [accodionHeight, setAccodionHeight] = useState(0);
const ref = useRef(null);
const open = () => setExpanded(!expanded);
useEffect(() => {
const getHeight = ref.current.scrollHeight;
setAccodionHeight(getHeight);
}, [expanded]);
return (
<>
<Card>
<Header>last viewed: {null}</Header>
<Footer
onClick={open}
className={expanded ? "show" : ""}
setHeight={accodionHeight}
ref={ref}
>
<span>View Details</span>
<div className="accodion" ref={ref}>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos,
facilis. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Eos, facilis. Lorem, ipsum dolor sit amet consectetur adipisicing
elit. Eos, facilis. Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Eos, facilis.
</div>
</Footer>
</Card>
</>
);
}