时间戳

首页 > 解决方案 > 控制嵌套手风琴部分内的高度

javascript - 控制嵌套手风琴部分内的高度

问题描述

我创建了一个手风琴组件，当我尝试使用嵌套级别时，我在手风琴内滚动。我不想在该部分内的手风琴内滚动，而不是页面应该在下面滚动。

我怎么能做到这一点。

应用程序.js

import Accordion from "./Accordion";

export default function App() {
  return (
    <div>
      <Accordion title="Whats lorem ipsum?">
        <Accordion title="Whats lorem ipsum?">
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s.
        </Accordion>
        <Accordion title="Whats lorem ipsum?">
          <ul>
            <li>
              a) Lorem Ipsum is simply dummy text of the printing and
              typesetting industry.{" "}
            </li>
            <li>
              b) Lorem Ipsum is simply dummy text of the printing and
              typesetting industry.{" "}
            </li>
            <li>
              c) Lorem Ipsum is simply dummy text of the printing and
              typesetting industry.{" "}
            </li>
            <li>
              d) Lorem Ipsum is simply dummy text of the printing and
              typesetting industry.{" "}
            </li>
          </ul>
        </Accordion>
      </Accordion>
      <Accordion title="Whats lorem ipsum?">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s.
      </Accordion>
      <Accordion title="Whats lorem ipsum?">
        <ul>
          <li>
            a) Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.{" "}
          </li>
          <li>
            b) Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.{" "}
          </li>
          <li>
            c) Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.{" "}
          </li>
          <li>
            d) Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.{" "}
          </li>
        </ul>
      </Accordion>
    </div>
  );
}

我已经添加了工作代码框

任何帮助表示赞赏

标签： javascriptcssreactjs

解决方案

根据你在codesandbox里面的代码

手风琴/index.js

一些改变很好地检查出来。

import React, { useState, useRef } from "react";
import Chevron from "./Chevron";

import "./style.css";

function Accordion(props) {
  const [setActive, setActiveState] = useState("");
  const [setHeight, setHeightState] = useState("0px");
  const [setRotate, setRotateState] = useState("accordion__icon");
  const [setMargin, setMarginState] = useState("0px");

  const content = useRef(null);

  function toggleAccordion() {
    setActiveState(setActive === "" ? "active" : "");
    setHeightState(
      setActive === "active" ? "0px" : "500px" // set pixel according to your needs 
    );
    setRotateState(
      setActive === "active" ? "accordion__icon" : "accordion__icon rotate"
    );
    setMarginState(setActive === "active" ? "0px" : "1rem");
  }

  return (
    <div className="accordion__section">
      <button className={`accordion ${setActive}`} onClick={toggleAccordion}>
        <p className="accordion__title">{props.title}</p>
        <Chevron className={`${setRotate}`} width={10} fill={"#777"} />
      </button>
      <div
        ref={content}
        style={{
          maxHeight: `${setHeight}`,
          marginBottom: `${setMargin}`,
          overflow: "hidden" // set overflow as hidden
        }}
        className="accordion__content"
      >
        <div className="accordion__text">{props.children}</div>
      </div>
    </div>
  );
}

export default Accordion;

推荐阅读