Question

我有多个下拉菜单。现在，当我打开一个下拉列表时。然后打开第二个。两者都是开放的，内容是相同的。我想要，如果用户要打开第二个，则第一个将关闭。

{this.state.MainChannels.map(item => {
                    return (
                        <Category key={item.name} >

                            <CategoryContainer >
                                <CheckboxLabel>

                                    <CheckboxInput type="checkbox" checked={item.followed} onChange={() => this.handleCheckAllSubCategories(item)} >

                                    </CheckboxInput>

                                    <CheckboxButton className="fa fa-check"  >


                                    </CheckboxButton>

                                </CheckboxLabel>
                                <CategoryTitle>
                                    {item.name}
                                </CategoryTitle>
                                <ChannelImage style={{ backgroundImage: `linear-gradient(to right, rgba(27,31,31,1) ,  rgba(255,255,255,0)),  url(${item.image})` }}>

                                </ChannelImage>

                            </CategoryContainer>

                            <OpenInput type="checkbox" onClick={() => this.handleChannel(item.name)}>

                            </OpenInput>

                            <OpenButton className="fa fa-chevron-down" >

                            </OpenButton>
                            {subChannels.map((item2, i): any => {

                                return (
                                    <Subcategories key={i} >


                                        <SubCheckboxLabel>
                                            <SubCheckboxInput id={item2.name} type="checkbox" onChange={() => this.handleCheckbox(item2.name)} checked={item2.followed}>

                                            </SubCheckboxInput>
                                            <SubCheckboxButton className="fa fa-check" >

                                            </SubCheckboxButton>
                                            <SubCategoryTitle>
                                                {item2.name}
                                            </SubCategoryTitle>
                                            <div>

                                            </div>
                                        </SubCheckboxLabel>
                                    </Subcategories>)
                            })}

                        </Category>



                    );
                }


const OpenInput = styled.input`
position: absolute;
top: 0px;
right: 0px;
height: 50px;
width: 40px;
z-index: 1000;
opacity: 0;
cursor:pointer;
&:checked ~ p {
transform: rotate(180deg);
}

&:checked ~ ul {
    display: block;
}
const OpenInput = styled.input`
    position: absolute;
    top: 0px;
    right: 0px;
    height: 50px;
    width: 40px;
    z-index: 1000;
    opacity: 0;
    cursor:pointer;
    &:checked ~ p {
    transform: rotate(180deg);
    }

&:checked ~ ul {
    display: block;
}

`

我的问题是最后一块。如果用户单击打开输入。将显示“ ul”部分。如何用一些JS代替它？

下面是问题所在：

我们看到有相同的内容。那不应该关闭一个下拉菜单

Answer 1

由于我们看不到您的处理程序正在做什么，因此很难从此代码中判断您是如何确定打开或关闭的，但是我建议根据状态使用状态来跟踪哪个项目处于打开状态项目名称（假设它是唯一的）。

然后，这就像将一个布尔值传递给您的下拉列表一样简单，例如，基于状态中的当前项目将其传递给“ isOpen”，事件处理程序将更新该状态。

Answer 2

这是我在评论部分中谈论的the example with accordions。您可以使用相同的原理来打开/关闭下拉菜单：

.ts：

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => {
  const toggleAccordion = e => {
    Array.from(document.getElementsByClassName('accordion')).forEach(el => el.classList.add('hidden'));
    e.target.classList.remove("hidden");
  };

  return (
    <>
      <div className="accordion hidden" onClick={toggleAccordion}>
        accordion header
        <div className="accordion-content-wrapper">
            <div>Content</div>
            <div>Content</div>
            <div>Content</div>
        </div>
      </div>
      <div className="accordion hidden" onClick={toggleAccordion}>
        accordion header 2
        <div className="accordion-content-wrapper">
            <div>Content</div>
            <div>Content</div>
            <div>Content</div>
        </div>
      </div>
    </>
  );
};

render(<App />, document.getElementById("root"));

.css（我认为您的下拉列表不需要）：

.accordion.hidden {
  height: 18px;
  overflow: hidden;
}

.accordion-content-wrapper{
  margin-left: 10px;
  border-left: 1px solid black;
}

现在，正如我所说，由于我们没有足够的代码来帮助您，这可能无法满足您的需求。正如Rayan Wolton所说，在下拉菜单中处理开/关密码的方式很重要。

如果打开第二个下拉列表，则关闭第一个下拉列表

2 个答案: