单击按钮时下拉菜单不起作用

【问题标题】：Dropdown menu Isnt Working when i click a button单击按钮时下拉菜单不起作用
【发布时间】：2021-08-06 15:24:59
【问题描述】：

<div class="dropdown">
<button class="dropdownbutton">Select Algorithm
                <i class="fa fa-caret-down"></i>
                <div class="dropdown-content">
                  <p>Link 1</p>
                  <p>Link 2</p>
                  <p>Link 3</p>
                </div>
              </button>
            </div>

我正在尝试使用一个按钮，当我单击该按钮时，它应该会打开一个下拉菜单，但我无法做到。正在发生按钮单击，但下拉菜单不起作用。

需要帮助

【问题讨论】：

标签： javascript html drop-down-menu web-development-server

【解决方案1】：

您可以像这样使用带有 js 和 css 的 simole 代码：

-------------- Css代码--------- ---

    .dropdown-content {
        display: none;
    }

    .dropdown-content.show {
        display: block;
    }

------------ HTML 代码 --------- ---

<div class="dropdown">
    <button class="dropdownbutton" onclick="showDropDown()">Select Algorithm
    </button>
    <i class="fa fa-caret-down"></i>
    <div class="dropdown-content">
        <p>Link 1</p>
        <p>Link 2</p>
        <p>Link 3</p>
    </div>
</div>

-------------- JS代码-------------------- ---

    function showDropDown() {
        let drp = document.querySelector('.dropdown-content');
        drp.classList.contains('show') ?
            document.querySelector('.dropdown-content').classList.remove("show") :
            document.querySelector(
                '.dropdown-content').classList.add("show")
    }

【讨论】：