如何正確隱藏我的HTML下拉菜單？

Question

我制作了一個包含HTML輸入/按鈕和一些其他按鈕的下拉菜單，作為下拉菜單項。 只要將鼠標懸停在主按鈕上，就會顯示菜單

<div class="dropdown">
    <button id="dropdown-wifi" class="extended-button" onclick="showDropDown()">Available WiFi Hot Spots</button>
    <div id="ssid-dropdown" class="dropdown-content">
        <!-- drop-down menu items dynamically created by JavaScript -->
    </div>
</div>

這是CSS中的懸停事件：

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

隱藏的JavaScript代碼，以后再次“應該”顯示：

function showDropDown() {
    document.getElementById("ssid-dropdown").style.display = 'block';
}

function hideDropDown() {
    document.getElementById("ssid-dropdown").style.display = 'none';
}

現在，只要將鼠標懸停在主按鈕上，下拉菜單就會正確顯示。 但是，當選擇一個項目時，即使未懸停在項目外部，我hideDropDown()調用hideDropDown()來隱藏菜單。

我通知我們，一旦調用hideDropDown()函數，Chrome調試窗口的CSS窗口中就會添加以下內容：

element.style {
    display: none;
}

我想這是一種CSS生成的，因為我的JavaScript函數調用hideDropDown() 。 但是，一旦此element.stlye發生，下拉菜單的懸停/顯示將不再起作用。

任何想法如何解決這個問題？

Answer 1

您可以使用名稱hide創建類並添加下一個CSS：

.hide {
  display:none;
}

添加或刪除此類。 這樣很簡單

Answer 2

您好，我親愛的朋友，您可以只使用jquery這樣：

$(".dropdown").show()或$(".dropdown").hide()