开发智能JavaScript下拉菜单

Question

​

            function exploreFunction() {
                document.getElementById("explore").classList.toggle("show");
            }
            
            window.onclick = function(event) {
                if (!event.target.matches('.dropbtn')) {
                var dropdowns = document.getElementsByClassName("dropdown-content");
                var i;
                for (i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                    }
                }
                }
            }
        

        
            function communityFunction() {
                document.getElementById("community").classList.toggle("show");
            }
            
            window.onclick = function(event) {
                if (!event.target.matches('.dropbtn')) {
                var dropdowns = document.getElementsByClassName("dropdown-content");
                var i;
                for (i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                    }
                }
                }
            }
        

        
            function storeFunction() {
                document.getElementById("marketplace").classList.toggle("show");
            }
            
            window.onclick = function(event) {
                if (!event.target.matches('.dropbtn')) {
                var dropdowns = document.getElementsByClassName("dropdown-content");
                var i;
                for (i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                    }
                }
                }
            }

.nav-bottom {
        text-align:right;
        margin:1rem 1rem 0 0;
        display:none;
        display:inline-block;
        position: relative;
        width:100%;
        padding-bottom:1rem;
    }

    .nav-bottom-link {
        position:relative;
        display:inline-block;
        font-family: 'Poppins', sans-serif;
        text-transform:uppercase;
        font-size:15px;
        margin-left:2.5rem;
        text-decoration:none;
        color:#111;
        font-weight:700;
        background-color:rgba(255, 255, 255, 0);
        border:none;
        padding-bottom:.5rem;
        cursor:pointer;
    }

    .nav-bottom-link:hover {
        color:#cc0000;
        transition:.2s;
    }
            
    .fa-angle-down {
        margin: 0 0 3px 3px;
        font-size:1.65rem;
      }

    .dropdown-content {
        display:none;
        position:fixed;
        top:60px;
        left:0;
        width:100%;
        height:81vh;
        background-color:rgba(17, 17, 17, 0.8);
    }

    .show {
        display:block;
    }

<div class="row" style="margin-top:0;">
    <div class="col-md">
       <div class="nav-bottom">
           <button onclick="exploreFunction()" class="nav-bottom-link dropbtn">Explore <i class="fas fa-angle-down"></i></button>

           <div id="explore" class="dropdown-content"></div>

            <button onclick="communityFunction()" class="nav-bottom-link dropbtn">Community <i class="fas fa-angle-down"></i></button>

            <div id="community" class="dropdown-content"></div>

            <button onclick="storeFunction()" class="nav-bottom-link dropbtn">Marketplace <i class="fas fa-angle-down"></i></button>

            <div id="marketplace" class="dropdown-content"></div>
         </div>                
       </div>
     </div>

​

我正在为一个网站创建三个下拉菜单(使用上面的3个javascript函数)。正如我现在所说的，当你点击一个按钮时，这个函数会运行来“显示”特定于该按钮的下拉菜单。但是，除非我在单击下一步按钮之前在下拉列表之外单击，否则这两个下拉列表会重叠。从本质上讲，我希望函数在显示下一个下拉菜单之前关闭前一个下拉菜单。

谢谢!

Answer 1

一个又快又脏的解决方案:您可以找到包含“show”类的元素并将其删除。

即

document.querySelector('.show').classList.remove('show')

您可以在将show类添加到要显示的菜单的代码行之前，将其添加到按钮处理程序中。

即

  `function storeFunction() {         document.querySelector('.show').classList.remove('show');        document.getElementById("marketplace").classList.toggle("show");             }`