如何隱藏其他下拉菜單時，選擇其他下拉菜單

我有一個菜單欄有2個選項，顯示點擊下拉菜單，技術上他們都顯示，即使你只點擊一個。我想要做的就是在點擊其他菜單項後隱藏其他下拉菜單。如何隱藏其他下拉菜單時，選擇其他下拉菜單

我的代碼有什麼問題？

BODY：

<body> 
    <ul> 
    <li class="File"> 
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">File</a> 
    <div class="dropdown-content" id="myDropdown"> 
     <a href="#">Open</a> 
     <a href="#">Save</a> 
     <a href="#">Save As</a> 
     <a href="#">Close</a> 
    </div> 
    <li class="Edit"> 
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Edit</a> 
    <div class="dropdown-content" id="myDropdown2"> 
     <a href="#">Undo</a> 
     <a href="#">Redo</a> 
     <a href="#">Cut</a> 
     <a href="#">Copy</a> 
     <a href="#">Paste</a> 
    </div> 
    </li> 
</ul> 
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;"> 
    PANTS 
</div> 
<!-- THE FUNCTION FOR CLICK --> 
<script> 
var drptochoose; 
function myFunction() { 
    document.getElementById("myDropdown").classList.toggle("show"); 
    document.getElementById("myDropdown2").classList.toggle("show"); 
} 

window.onclick = function(e) { 
    if (!e.target.matches('.dropbtn')) { 

    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    for (var d = 0; d < dropdowns.length; d++) { 
     var openDropdown = dropdowns[d]; 
     if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
     } 
    } 
    } 
} 
</script> 
<!-- END OF FUNCTION FOR CLICK --> 
    </body>

CSS：

<style> 
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: green; 
    font-family: verdana; 
    font-size: 14px; 
} 

li { 
    float: left; 
} 

li a, .dropbtn { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover, .dropdown:hover .dropbtn { 
    background-color: red; 
} 

li.dropdown { 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
    text-align: left; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.show {display:block;} 
<script src="jquery.js"></script> 
     </style>

來源

2016-11-30 Miguel Gaurano Punzal

嗯，你的HTML是無效的開始。你不關閉第一個'li'。 –

感謝您的快速回復，問題仍然存在。另一個下拉列表仍然顯示 –

您的CSS在哪裏 –

與您的代碼的問題是，它切換兩個下拉菜單。因此，當他們都沒有顯示他們得到這個類。

你可以做這樣的事情：

<body> 
    <ul> 
    <li class="File"> 
     <a href="javascript:void(0)" class="dropbtn" onclick="myFunction(myDropdown)">File</a> 
     <div class="dropdown-content" id="myDropdown"> 
     <a href="#">Open</a> 
     <a href="#">Save</a> 
     <a href="#">Save As</a> 
     <a href="#">Close</a> 
     </div> 
    </li> 
    <li class="Edit"> 
     <a href="javascript:void(0)" class="dropbtn" onclick="myFunction(myDropdown2)">Edit</a> 
     <div class="dropdown-content" id="myDropdown2"> 
     <a href="#">Undo</a> 
     <a href="#">Redo</a> 
     <a href="#">Cut</a> 
     <a href="#">Copy</a> 
     <a href="#">Paste</a> 
     </div> 
    </li> 
    </ul> 
    <div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;"> 
    PANTS 
    </div> 
    <!-- THE FUNCTION FOR CLICK --> 

    <script> 
    var drptochoose; 

    function hideDropdowns(excludeId) { 
     var dropdowns = document.getElementsByClassName("dropdown-content"); 
     for (var d = 0; d < dropdowns.length; d++) { 
     var openDropdown = dropdowns[d]; 
     if (openDropdown.classList.contains('show') && excludeId !== openDropdown.id) { 
      openDropdown.classList.remove('show'); 
     } 
     } 
    } 

    function myFunction(id) { 
     id.classList.toggle("show"); 
     hideDropdowns(id.id); 
    } 

    window.onclick = function(e) { 
     if (!e.target.matches('.dropbtn')) { 
     hideDropdowns(); 
     } 
    } 
    </script> 

    <!-- END OF FUNCTION FOR CLICK --> 
</body>

來源

2016-11-30 13:41:19 stee1rat

這解決了它！ :)謝謝stee1rat :) –

你需要像這樣

jsFiddleDemoNavBar

來源

2016-11-30 13:20:57

這不會對我的代碼工作。 –

我不認爲你需要去通過所有的代碼做你想找我的理解它。只需使用.hide類在頁面加載時默認隱藏下拉列表，然後使用按鈕onclick使用call（this）和nextElementSibling切換它們。

這是代碼。

<style> 
 
    .hide{ 
 
    display:none; 
 
} 
 
    </style> 
 
    <body> 
 
    <ul> 
 
    <li class="File"> 
 
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction.call(this)">File</a> 
 
    <div class="dropdown-content hide" id="myDropdown"> 
 
     <a href="#">Open</a> 
 
     <a href="#">Save</a> 
 
     <a href="#">Save As</a> 
 
     <a href="#">Close</a> 
 
    </div> 
 
    </li> 
 
    <li class="Edit"> 
 
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction.call(this)">Edit</a> 
 
    <div class="dropdown-content hide" id="myDropdown2"> 
 
     <a href="#">Undo</a> 
 
     <a href="#">Redo</a> 
 
     <a href="#">Cut</a> 
 
     <a href="#">Copy</a> 
 
     <a href="#">Paste</a> 
 
    </div> 
 
    </li> 
 
</ul> 
 
<div id="TITLE" style="font-family: verdana; font-size: 36px; margin-left: 1200px; margin-top: -45px; color: white;"> 
 
    PANTS 
 
</div> 
 
<script> 
 
var drptochoose; 
 
function myFunction() { 
 
\t \t var isAlreadyOpen = false; 
 
\t \t if(!this.nextElementSibling.classList.contains('hide')) 
 
    { 
 
    \t // if the clicked button dropdown is already open then use this bool to not show it again. 
 
    \t isAlreadyOpen = true; 
 
    } 
 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
    for (var d = 0; d < dropdowns.length; d++) { 
 
     var openDropdown = dropdowns[d]; 
 
     if (!openDropdown.classList.contains('hide')) { 
 
     openDropdown.classList.toggle("hide"); 
 
     } 
 
    } 
 
    if(!isAlreadyOpen) 
 
    { 
 
    \t // if the dropdown was hidden when clicked then show it 
 
    \t this.nextElementSibling.classList.toggle("hide");  
 
    } 
 
} 
 

 
</script> 
 
</body>

希望這有助於。

來源

2016-11-30 13:42:13

window.onclick = function(e) { 
 
     if (e.target.matches('.dropbtn')) { 
 
      var allDropDown = document.querySelectorAll('.dropdown-content'); 
 

 
     //This will hide all the dropdown for everytime you click 
 
     [].forEach.call(allDropdown, function(dropdown){ 
 
      dropdown.classList.add('hide'); 
 
     }); 
 

 
     //This will show the subdrop down of that menu 
 
     var dropdown = e.target.parent.querySelector(".dropdown-content"); 
 
     dropdown.classList.add('show'); 
 
     } 
 
    } 
 
}

來源

2016-11-30 13:57:33 jforjs

如何隱藏其他下拉菜單時，選擇其他下拉菜單

回答

相關問題