Javascript 我如何使下拉框在没有JS的情况下工作？

我在一个学校项目中使用javascript制作了下拉按钮，但任务要求所有与javascript相关的东西都应该在没有javascript的情况下工作。如何使这些按钮在使用和不使用javascript的情况下都能工作。我希望它们在JS不在场时一直打开

编辑：忘记在css中添加CONTAINERWARD

代码如下：

HTML:

JS:

var acc=document.getElementsByClassName（“下拉菜单”）；
var i；
对于（i=0；i

---

这不是一个完整的答案，而是一个能为你指明正确方向的答案（希望在此过程中能学到更多）

---

您需要一些可以在两个“状态”之间切换的东西来表示下拉菜单的“打开”和“关闭”行为，这些东西在没有javascript的情况下进行本机操作，这听起来像是一个复选框可能有一些用处？您可以在“选中”和“未选中”之间切换，有一个css伪类“：checked”，您可以使用它来控制打开和关闭样式。

尝试此复选框方法。您需要像这样修改html

<div class="ContainerReward">
    <label for="tenkm" class="dropdown">10km/week</label>
    <input class="dropdown_input" type="checkbox" id="tenkm" />
    <div class="panel">
        <p>K</p>
    </div>
    <label for="twentykm" class="dropdown">20km/week</label>
    <input class="dropdown_input" type="checkbox" id="twentykm" />
    <div class="panel">
        <p>K</p>
    </div>
    <label for="thirtykm" class="dropdown">30km/week</label>
    <input class="dropdown_input" type="checkbox" id="thirtykm" />
    <div class="panel">
        <p>K</p>
    </div>
    <label for="fortykm" class="dropdown">40km/week</label>
    <input class="dropdown_input" type="checkbox" id="fortykm" />
    <div class="panel">
        <p>K</p>
    </div>
    <label for="fiftykm" class="dropdown">50km/week</label>
    <input class="dropdown_input" type="checkbox" id="fiftykm" />
    <div class="panel">
        <p>K</p>
    </div>
</div>

.ContainerReward {
display: grid;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 6;
margin: 10px;
border-radius: 5px;
background-color: transparent;
}
.dropdown {
margin: 2px;
border-radius: 5px;
background-color: #BCEBCB;
color: #000000;
cursor: pointer;
padding:  18px;
text-align: center;
border: none;
outline: none;
transition: 0.4s;
}

.active, .dropdown:hover {
    background-color: #93B48B;
}
.dropdown_input {
  display: none;
}
.dropdown_input:not(:checked) + .panel {
    margin: 2px;
    border-radius: 5px;
    padding: 0 18px;
    background-color: #F7FFF6;
    display: none;
    overflow: hidden;
}

这应该适用于您的用例

这是这个例子的用笔

您还可以使用本机

和

元素，这些元素正是用于此目的的。它甚至可以自动访问。不需要JavaScript

---

啊，我明白了，显然我不识字。你要找的是手风琴，不是下拉式的。然后我建议使用

和

。它们在大多数现代浏览器中也能正常工作。

谢谢您的回答！我以前也尝试过类似的复选框。当处于移动模式时，它位于带有下拉菜单的导航栏上。问题是我需要为复选框按钮创建一个带有CSS的汉堡包菜单。我希望整个下拉按钮是可点击的。这可以通过复选框方法实现。您可以使复选框填充其父容器。这样，整个容器都可以点击，从而激活复选框。非常感谢！但是我有一个小问题。当我使用此代码并在Chrome中运行网站时，在我单击每个按钮后，复选框开始出现在每个按钮下方，即使它们没有出现在codepen上。这应该适用于所有浏览器，请尝试刷新您的选项卡。如果这有帮助，请接受答案。它现在起作用了。我这边的代码有问题。但是，我忘了提到，单击按钮后出现的面板框是透明的，而不是白色的。我忘了在CSS中添加一部分代码，所以我要马上更新这篇文章。我已经更新了答案和钢笔。您需要添加显示：网格；否则所有其他网格属性将无法使用这些属性。不幸的是，尽管我使用了显示网格，但面板仍然是透明的。。。

var acc = document.getElementsByClassName("dropdown");
        var i;

        for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                    panel.style.display = "none";
                } else {
                    panel.style.display = "block";
                }
            });
        }

<div class="ContainerReward">
    <label for="tenkm" class="dropdown">10km/week</label>
    <input class="dropdown_input" type="checkbox" id="tenkm" />
    <div class="panel">
        <p>K</p>
    </div>
    <label for="twentykm" class="dropdown">20km/week</label>
    <input class="dropdown_input" type="checkbox" id="twentykm" />
    <div class="panel">
        <p>K</p>
    </div>
    <label for="thirtykm" class="dropdown">30km/week</label>
    <input class="dropdown_input" type="checkbox" id="thirtykm" />
    <div class="panel">
        <p>K</p>
    </div>
    <label for="fortykm" class="dropdown">40km/week</label>
    <input class="dropdown_input" type="checkbox" id="fortykm" />
    <div class="panel">
        <p>K</p>
    </div>
    <label for="fiftykm" class="dropdown">50km/week</label>
    <input class="dropdown_input" type="checkbox" id="fiftykm" />
    <div class="panel">
        <p>K</p>
    </div>
</div>

.ContainerReward {
display: grid;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 6;
margin: 10px;
border-radius: 5px;
background-color: transparent;
}
.dropdown {
margin: 2px;
border-radius: 5px;
background-color: #BCEBCB;
color: #000000;
cursor: pointer;
padding:  18px;
text-align: center;
border: none;
outline: none;
transition: 0.4s;
}

.active, .dropdown:hover {
    background-color: #93B48B;
}
.dropdown_input {
  display: none;
}
.dropdown_input:not(:checked) + .panel {
    margin: 2px;
    border-radius: 5px;
    padding: 0 18px;
    background-color: #F7FFF6;
    display: none;
    overflow: hidden;
}