Javascript 在卡中自定义下拉列表

我在React中继承了一个框架，使用

React jss

和

simple flexbox

进行样式设计。下面显示

CardComponent

图像。我创建了一个

GroupComponent

，以放入这张卡中

我现在想做的是，当用户单击一行时，会显示一个包含n行的列表，随后会扩展卡片并将其他条目进一步推到列表大小以下（基本上是汉堡菜单推送，或类似于下拉菜单）。我还想删除和添加这些行的功能

除了在大多数情况下使用

react bootstrap

之外，我对组件样式设计的经验很少，所以我真的被困在这里了

下面是

GroupComponent

：

const useStyles = createUseStyles((theme) => ({
    itemTitle: {
        ...theme.typography.itemTitle,
        color: theme.color.veryDarkGrayishBlue
    },
    itemValue: {
        color: theme.color.grayishBlue2
    }
}));

export const GroupComponent = ({ containerStyles, teams }) => {
    const theme = useTheme();
    const classes = useStyles({ theme });
    function renderEntry(title, value) {
        return (
                    <Row horizontal='space-between' vertical='center'>
                        <span className={classes.itemTitle}>{title}</span>
                        <span className={[classes.itemTitle, classes.itemValue].join(' ')}>
                            <img
                                src={require('../../assets/images/' + value + '.png')}
                                alt={value}
                                height='16'
                                width='16'
                            />
                        </span>
                    </Row>
        );
    }

    return (
        <CardComponent
            containerStyles={containerStyles}
            title={'Group ' + teams[0].groupName}
            items={[
                renderEntry(teams[0].name, teams[0].name, 0, 0),
                renderEntry(teams[1].name, teams[1].name, 0, 0),
                renderEntry(teams[2].name, teams[2].name, 0, 0),
                renderEntry(teams[3].name, teams[3].name, 0, 0)
            ]}
        ></CardComponent>
    );
};

export default GroupComponent;

最后是

卡片组件

。如果您可以想象

players

数组显示为下拉列表，并将其他国家/地区的行进一步向下推：

---

我会在容器、renderEntry中添加n行额外内容：

function renderEntry(title, value) {
  return (
    <Row horizontal='space-between' vertical='center'>
      <div className="main-content">
        <span className={classes.itemTitle}>{title}</span>
        <span className={[classes.itemTitle, classes.itemValue].join(' ')}>
          <img
            src={require('../../assets/images/' + value + '.png')}
            alt={value}
            height='16'
            width='16'
            />
        </span>
      </div>
      <div className="extra-content">
        <div>Player 1</div>
        <div>Player 2</div>
        <div>Player 3</div>
      </div>
    </Row>
  );
}

然后，我将添加css动画以使高度更改平滑：

。额外内容{
过渡：高度1s；
}

然后向每个

renderEntry

添加一个单击事件处理程序，该处理程序将添加或删除隐藏的类：

函数渲染（标题、值）{
常量hideContent=（e）=>{
e、 target.querySelector（'.extra content'）.classList.toggle（'hidden'）；
}
返回(

最后，您可以对其进行设置，以便将隐藏类添加为标准：

<div className="extra-content hidden">

<div className="extra-content hidden">