從下拉菜單打開彈出框

我想打開一個下拉菜單，當我選擇其中一個選項時，會彈出一個小窗口，並提供更多選項。我發現這張圖中顯示的東西：http://datasmugglers.com/wp-content/uploads/mute-someone.jpg 從下拉菜單打開彈出框

我嘗試了一些我找到的解決方案，但不管我做了什麼似乎都不起作用。我找不到任何錯誤，但我試圖完全按照在最後一個問題中有人提供給我的模板，而且它不工作。

//toggles the hidden dropdown 
 
function dropdown() { 
 
\t document.getElementById("myDropdown").classList.toggle('show'); 
 
} 
 
//opens a popup window from clicking settings 
 
function settings() { 
 
\t document.getElementById('settingsD').classList.toggle('show'); 
 
}

/* dropdown button*/ 
 
.dropbtn { 
 
\t background-color:#4caf50; 
 
\t color: white; 
 
\t padding: 16px; 
 
\t font-size: 16px; 
 
\t border: none; 
 
\t cursor: pointer; 
 
} 
 

 
/*drop down button on hover & focus*/ 
 
.dropbtn:hover, .dropbtn:focus { 
 
\t background-color: #3e8e41; 
 
} 
 

 
/*the container <div> needed to postision the content */ 
 
.dropdown { 
 
\t position: relative; 
 
\t display: inline-block; 
 
} 
 

 
/*dropdown content*/ 
 
.dropdown-content { 
 
\t display: none; 
 
\t position: absolute; 
 
\t background-color: #f9f9f9; 
 
\t min-width: 160px; 
 
\t overflow: auto; 
 
\t box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
\t z-index: 1; 
 
} 
 

 
/*changes the style of the list*/ 
 
.dropdown-content2 { 
 
\t color: black; 
 
\t padding: 12px 16px; 
 
\t text-decoration: none; 
 
\t display: block; 
 
} 
 

 
/*links in the dropdown*/ 
 
.dropdown-content a:hover {background-color: #f1f1f1} 
 

 
/*show the dropdown (use Js to add this class to the dropwdown-content container when its clicked)*/ 
 
.show {display:block;} 
 

 
.settings { 
 
\t display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    z-index: 10000; 
 
    max-width: 26em; 
 
    height: 199px; 
 
    padding: 28px 22px; 
 
    border: 4px solid rgb(197, 218, 255); 
 
    background: black; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 
\t <link type="text/css" rel="stylesheet" href="dropdown.css"> 
 
\t <script src="dropdown.js" type="text/javascript"></script> 
 
\t <head> 
 
\t \t <div class="dropdown"> 
 
\t \t \t <button onclick='dropdown()' class="dropbtn">Dropdown</button> 
 
\t \t \t \t <div id="myDropdown" class="dropdown-content"> 
 
\t \t \t \t \t <div class='dropdown-content2' onclick="settings()">Settings</div> 
 
\t \t \t \t \t \t <span id='settingsD' class='settings'>These are the settings</span> 
 
\t \t \t \t \t <div class='dropdown-content2'>Link 2</div> \t 
 
\t \t \t \t \t <div class='dropdown-content2'>Link 3</div> 
 
\t \t \t \t </div> 
 
\t \t </div> 
 
\t </head> 
 
</html>

正如你看到的，我不能點擊下拉菜單的設置一部分，並具有設置文戲，我不知道爲什麼。提前謝謝你的幫助！

來源

2017-02-27 Katwatsu

在HTML中，「」部分不適用於內容，請改爲使用「」。 – Stickers

您必須將.show放置在您的css中的.settings以下。如果你喜歡你，中的display:block;會被下面的.settings中的display:none;覆蓋。

否則你可以做.settings:not(.show)如果沒有顯示.settings的css。

來源

2017-02-27 22:06:42

那麼工作...有點。它現在顯示，但它顯示在下拉菜單中，而不是像我想要的那樣位於頁面的中心。我覺得HTML是錯誤的，但我的格式與上一個問題相同。編輯：Nvm我修正了它：D html是錯誤的 – Katwatsu

從下拉菜單打開彈出框

回答

相關問題