Css 从“中删除类”；“不可调和”；项目并将其分配给React中的选定项目

我制作了一个切换组件（准确地说是手风琴）

我正在映射一系列对象，并将它们列为：

{object.map((o) => (
   <Accordion key={o.id} title={o.question} className="item">
     <div className="text"> { o.answer } <div/>
   </Accordion>
))}

现在，每次我单击一个问题，它都会向下切换以显示答案。所有这些都很好（我用钩子）

当其中一个问题被打开时，我希望能够更改此列表中所有未切换元素的不透明度

因此，如果我打开问题2，它将成为“当前项目”，问题2的不透明性，其答案应为100%，所有其他问题（问题1和问题3）应变暗或变为50%不透明。。我可以使用：hover和css来实现，但这只适用于hover

从理论上讲，我应该能够选择一个项目，并从除所选项目之外的所有其他项目中删除基类。我不知道在现实中该怎么做。救命啊。 我觉得我错过了一些明显的东西

const Accordion = ({ title, children, opened = false }) => {
  const [show, setShow] = useState(opened);
  const rotation = classnames('icon', {
    'rotate': show,
  });
  const content = classnames('contents', {
    'closed': !show,
  });

  useEffect(() => {
    setShow(opened);
  }, [opened]);

  const toggle = useCallback(() => {
    setShow(!show);
  }, [show]);

  return (
      <div className='titleContainer' onClick={toggle}>
        <div className={rotations}>
          <i className='icon' />
        </div>
        <h5 className='title'>{title}</h5>
      </div>
      <div className={content}>{children}</div>
  );
};

const Accordion=（{title，children，opened=false}）=>{
const[show，setShow]=useState（打开）；
常量旋转=类名（'图标'{
“旋转”：显示，
});
常量内容=类名（'contents'{
“已关闭”：！显示，
});
useffect（（）=>{
设置显示（已打开）；
}，[开放]；
const toggle=useCallback（（）=>{
设置显示（！show）；
}，[秀]；
返回(
{title}
{儿童}
);
};

我终于明白你的意思了，我想这就是答案：

const questionColor = (questionIndex, activeQuestion) => {
    if (activeQuestion !== null && activeQuestion !== questionIndex) {
      return "rgba(0,0,0,0.1)";
    } else return "rgba(0,0,0,1)";
  };

此处的工作解决方案：

---

我希望我能看到这个。但我在我的原始问题中编辑了要求-因此，如果我打开问题2，它将成为“当前项”，问题2的不透明性，其答案应为100%，所有其他（问题1和问题3）应变暗或变为50%不透明性。我可以使用您提到的代码，在当前打开的项目具有不同样式的情况下执行相反的操作，但这是相反的-我希望所有其他非活动项目变暗，而当前/活动项目变暗，因此看起来像是“选中的”，这对您有帮助吗？谢谢你，但这是我的工作。现在想象一下，当其中一个问题突出显示时（在您的示例中为绿色），其他问题变暗，因此绿色看起来很亮并弹出。这有意义吗？你说的弹出是什么意思？改变位置或仅视觉效果？仅视觉效果。如果问题处于打开状态，则处于关闭状态的问题将淡出。

const questionColor = (questionIndex, activeQuestion) => {
    if (activeQuestion !== null && activeQuestion !== questionIndex) {
      return "rgba(0,0,0,0.1)";
    } else return "rgba(0,0,0,1)";
  };