为什么我的 react-bootstrap Accordion 不能在小型设备上运行？

Question

我的一个组件中有一个简单的Accordion 。

function CustomToggle({eventKey}) {
    const [children, setChildren] = useState('Mais filtros 🠗')
    const decoratedOnClick = useAccordionToggle(eventKey, () =>
        setChildren(children === 'Mais filtros 🠗' ? 'Menos filtros 🠕' : 'Mais filtros 🠗')
    )
  
    return (
        <div className="text-center">
            <div className="tag align-center" onClick={decoratedOnClick}>
                {children}
            </div>
        </div>
    )
  }


...


<Accordion>
    <CustomToggle eventKey="0" />
    <Accordion.Collapse eventKey="0">
        <QueryForm
            baseEndpoint={this.props.baseEndpoint}
            tagsInitialValues={this.state.searchParams.tags}
            textInitialValue={this.state.searchParams.description}
            setSearchParams={this.setSearchParams}
        />
    </Accordion.Collapse>
</Accordion>

它在较大的断点上完美运行，但对于较小的设备， QueryForm以相反的方向显示并停留在页面内容的顶部。

检查沙箱： https://codesandbox.io/s/0y8cm

（点击“Mais filtros”触发手风琴并在出现导航栏切换时查看有问题的断点）

我究竟做错了什么？

Answer 1

Accordion react 组件的默认值不使用绝对 position 来定义手风琴内容的 position。 我不确定您如何自定义 position：绝对。 那么第一种方式如果你考虑不需要使用position：绝对的。 您可以在以下位置删除它：

  collapsing {
    position: absolute !important;
    z-index: 3;
    width: 100%;
    top: 75px;
  }

  .collapse.show {
    display: block;
    position: absolute;
    z-index: 3;
    width: 100%;
    top: 75px;
  }

第二种方式，如果您打算在移动设备中使用 position: absolute 做某事，您应该选择表单的容器并添加 position: relative 那么您的表单将基于该容器的 position 呈现

<div style={{ position: "relative" }}>
    <Accordion>
    <CustomToggle eventKey="0" />
    <Accordion.Collapse eventKey="0">
        <QueryForm
        baseEndpoint={this.props.baseEndpoint}
        tagsInitialValues={this.state.searchParams.tags}
        textInitialValue={this.state.searchParams.description}
        setSearchParams={this.setSearchParams}
        />
    </Accordion.Collapse>
    </Accordion>
</div>

Answer 2

您的 Navbar.css 中存在一些问题。 不知道为什么你使用 position 是绝对的。 我注释掉了这些，它现在可以工作了。

  .collapsing {
    /* position: absolute !important; */
    /* z-index: 3; */
    width: 100%;
    /* top: 75px; */
  }

  .collapse.show {
    display: block;
    /* position: absolute; */
    /* z-index: 3; */
    width: 100%;
    /* top: 75px; */
  }

https://codesandbox.io/s/relaxed-dust-2yimw?file=/src/components/common/Navbar.css:736-984

Answer 3

您是否在小型设备上运行 Accordian？

这是我的代码。 我希望它会帮助你。

import React, {useState} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import PropTypes from 'prop-types';

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
  },
  heading: {
    fontSize: theme.typography.pxToRem(1),
    fontWeight: theme.typography.fontWeightRegular,
  },
}));

const Accordian = ({ 
        title,  
        data, 
        onclick, 
        shownName
    }) =>{
            const classes = useStyles();
            let content;

            const [subtitle, setSubtitle] = useState("");
            const [expand, setExpand] = useState(true);

            const liClick = (e) => {
                setSubtitle(e.target.getAttribute('data'));
                onclick(e);
                setExpand(!expand);
            }
            const clickExpand = (e) =>{
                setExpand(!expand);
            }
                    
            content = data.map((value, key)=>{
                return (
                    <li 
                        className="list-group-item" 
                        key={data[key][shownName]+"_"+key} 
                        name={data[key][shownName]} 
                        data={data[key][shownName]} 
                        onClick={liClick}
                    >
                        {data[key].mark?(<img src={data[key].mark} align="left" className="mark_sign" alt="mark"/>):''}
                            {data[key][shownName]}
                        <i className="fa fa-angle-right"  align="right"/>
                    </li>
                );
            });

            return (
                <div className={classes.root}>
                    <div className="container">
                        <Accordion 
                            defaultExpanded={true} 
                            expanded={expand} 
                            style={{ 
                                borderBottom:'1px', 
                                borderBottomColor:'white', 
                                borderBottomStyle:'solid'
                            }}>
                            <AccordionSummary
                                expandIcon={<ExpandMoreIcon />}
                                aria-controls="panel1a-content"
                                id="panel1a-header"
                            >
                                <Typography 
                                    className={classes.heading} 
                                    style={{fontSize:'14px', textAlign:'left'}}
                                    onClick={clickExpand}
                                >
                                    <span className="Name" style={{ float:'left'}}>{title}{' '}</span>
                                    <span style={{fontSize:'18px', color:'#007bff',width:'100%',top:'10px',left:'0', textAlign:'center', position:'absolute'}}>{' '}{subtitle}</span>
                                </Typography>
                            </AccordionSummary>

                            <AccordionDetails>
                                <Typography>
                                    <span 
                                        className="list-group list-group-flush" 
                                        align="center"
                                    >
                                        {content}
                                    </span>
                                </Typography>
                            </AccordionDetails>
                        </Accordion>
                    </div>
                </div>
            );
}

Accordian.propTypes = {
  shownName: PropTypes.string.isRequired,
    data: PropTypes.array.isRequired,
    onclick: PropTypes.func.isRequired
};

export default Accordian;

昨天我解决了这个问题。 所以我分享这个代码。 请检查一下。