為什么我的 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;

昨天我解決了這個問題。 所以我分享這個代碼。 請檢查一下。