HTML下拉不能正常工作

Question

我有一个下拉菜单无法正常工作。当我点击其中一个按钮时，会出现一个下拉菜单。但是，当我再次点击按钮时，它应该关闭，但它dosn't。我知道这与closeAll函数有关，但当第一个下拉菜单已经打开时，我仍然需要该函数来关闭另一个下拉菜单。

/* When the user clicks on the button, 
 
    toggle between hiding and showing the dropdown content */ 
 
    function myFunction() { 
 
    closeAll(); 
 
     document.getElementById("myDropdown").classList.toggle("show"); 
 
     } 
 

 
     function myFunction2() { 
 
     closeAll(); 
 
     document.getElementById("myDropdown2").classList.toggle("show"); \t 
 
    } 
 

 
    function closeAll(){ 
 
\t  var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
\t  var i; 
 
\t  for (i = 0; i < dropdowns.length; i++) { 
 
\t  var openDropdown = dropdowns[i]; 
 
\t  openDropdown.classList.remove('show'); 
 
\t  } 
 
    } 
 

 
    // Close the dropdown menu if the user clicks outside of it 
 
    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'); 
 
\t \t 
 
      } 
 
     } 
 
     } 
 
    }

/* Dropdown Button */ 
 
    .dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
    } 
 

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

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

 
    /* Dropdown Content (Hidden by Default) */ 
 
    .dropdown-content { 
 
     display: none; 
 
     position: absolute; 
 
     background-color: #f9f9f9; 
 
     min-width: 150px; 
 
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
     z-index: 1; 
 
    } 
 

 
    /* Links inside the dropdown */ 
 
    .dropdown-content a { 
 
     color: black; 
 
     padding: 12px 16px; 
 
     text-decoration: none; 
 
     display: block; 
 
    } 
 

 
    /* Change color of dropdown links on hover */ 
 
    #myDropdown a:hover {background-color: #f1f1f1} 
 

 
    /* Show the dropdown menu (use JS to add this class to the .dropdown-content 
 
    container when the user clicks on the dropdown button) */ 
 
    .show {display:block;} 
 

 
    #myDropdown2{ 
 
\t  min-width:200px; 
 
\t  border:4px solid red; 
 
\t 
 
    } 
 

 
    #myDropdown2 a:hover{ 
 
\t  color:red; 
 
    } 
 

 
    .left-bar{ 
 
\t  float:left; 
 
    } 
 

 
    .right-bar{ 
 
\t  float:left; 
 
    }

 
 

 
    <div class="dropdown"> 
 
     <button onclick="myFunction()" class="dropbtn">Dropdown</button> 
 
     <div id="myDropdown" class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
     </div> 
 
    </div> 
 

 
    <div class="dropdown"> 
 
     <button onclick="myFunction2()" class="dropbtn">Dropdown</button> 
 
     <div id="myDropdown2" class="dropdown-content"> 
 
\t  <div class="left-bar"> 
 
\t \t  <a href="#">Link 1</a> 
 
\t \t  <a href="#">Link 2</a> 
 
\t \t  <a href="#">Link 3</a> 
 
\t  </div> 
 
\t 
 
\t  <div class="right-bar"> 
 
\t \t  <a href="#">Link 1</a> 
 
\t \t  <a href="#">Link 2</a> 
 
\t \t  <a href="#">Link 3</a> 
 
\t  </div> 
 
     </div> 
 
    </div>

Answer 1

的功能（myFunction() and myFunction2()）先关闭使用closeAll();和未来所有的下拉菜单线document.getElementById("myDropdown").classList.toggle("show");显示它again.So，当您再次单击该按钮و它不会关闭。

为了修复它：

只是删除功能closeAll();和改变你这样的代码：

function myFunction() { 
    document.getElementById("myDropdown2").classList.remove("show"); 
    document.getElementById("myDropdown").classList.toggle("show"); 
} 

function myFunction2() { 
    document.getElementById("myDropdown").classList.remove("show"); 
    document.getElementById("myDropdown2").classList.toggle("show"); 
} 

全码：

function myFunction() { 
 
    document.getElementById("myDropdown2").classList.remove("show"); 
 
    document.getElementById("myDropdown").classList.toggle("show"); 
 
} 
 

 
function myFunction2() { 
 
    document.getElementById("myDropdown").classList.remove("show"); 
 
    document.getElementById("myDropdown2").classList.toggle("show"); 
 
} 
 

 
// Close the dropdown menu if the user clicks outside of it 
 
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'); 
 

 
     } 
 
    } 
 
    } 
 
}

.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 

 
/* Dropdown button on hover & focus */ 
 

 
.dropbtn:hover, 
 
.dropbtn:focus { 
 
    background-color: #3e8e41; 
 
} 
 

 

 
/* The container <div> - needed to position the dropdown content */ 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 

 
/* Dropdown Content (Hidden by Default) */ 
 

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

 

 
/* Links inside the dropdown */ 
 

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

 

 
/* Change color of dropdown links on hover */ 
 

 
#myDropdown a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 

 
/* Show the dropdown menu (use JS to add this class to the .dropdown-content 
 
    container when the user clicks on the dropdown button) */ 
 

 
.show { 
 
    display: block; 
 
} 
 

 
#myDropdown2 { 
 
    min-width: 200px; 
 
    border: 4px solid red; 
 
} 
 

 
#myDropdown2 a:hover { 
 
    color: red; 
 
} 
 

 
.left-bar { 
 
    float: left; 
 
} 
 

 
.right-bar { 
 
    float: left; 
 
}

<div class="dropdown"> 
 
    <button onclick="myFunction()" class="dropbtn">Dropdown</button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div> 
 

 
<div class="dropdown"> 
 
    <button onclick="myFunction2()" class="dropbtn">Dropdown</button> 
 
    <div id="myDropdown2" class="dropdown-content"> 
 
    <div class="left-bar"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 

 
    <div class="right-bar"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

为myFunction() & myFunction2()closeAll();

删除这个功能您已经使用ToggleClass

/* When the user clicks on the button, 
 
    toggle between hiding and showing the dropdown content */ 
 
function myFunction() { 
 
    
 
    document.getElementById("myDropdown").classList.toggle("show"); 
 
} 
 

 
function myFunction2() { 
 
    
 
    document.getElementById("myDropdown2").classList.toggle("show"); 
 
} 
 

 
function closeAll() { 
 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
    var i; 
 
    for (i = 0; i < dropdowns.length; i++) { 
 
    var openDropdown = dropdowns[i]; 
 
    openDropdown.classList.remove('show'); 
 
    } 
 
} 
 

 
// Close the dropdown menu if the user clicks outside of it 
 
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'); 
 

 
     } 
 
    } 
 
    } 
 
}

/* Dropdown Button */ 
 

 
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 

 
/* Dropdown button on hover & focus */ 
 

 
.dropbtn:hover, 
 
.dropbtn:focus { 
 
    background-color: #3e8e41; 
 
} 
 

 

 
/* The container <div> - needed to position the dropdown content */ 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 

 
/* Dropdown Content (Hidden by Default) */ 
 

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

 

 
/* Links inside the dropdown */ 
 

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

 

 
/* Change color of dropdown links on hover */ 
 

 
#myDropdown a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 

 
/* Show the dropdown menu (use JS to add this class to the .dropdown-content 
 
    container when the user clicks on the dropdown button) */ 
 

 
.show { 
 
    display: block; 
 
} 
 

 
#myDropdown2 { 
 
    min-width: 200px; 
 
    border: 4px solid red; 
 
} 
 

 
#myDropdown2 a:hover { 
 
    color: red; 
 
} 
 

 
.left-bar { 
 
    float: left; 
 
} 
 

 
.right-bar { 
 
    float: left; 
 
}

<div class="dropdown"> 
 
    <button onclick="myFunction()" class="dropbtn">Dropdown</button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div> 
 

 
<div class="dropdown"> 
 
    <button onclick="myFunction2()" class="dropbtn">Dropdown</button> 
 
    <div id="myDropdown2" class="dropdown-content"> 
 
    <div class="left-bar"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 

 
    <div class="right-bar"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

在第一步中，关闭所有下拉菜单，然后切换当前的下拉菜单，然后重新打开。如果你想改变这种行为，你必须改变closeAll（）函数来接收一个参数，这个参数可能是当前的下拉或者按钮，并且只关闭除了这个之外的所有参数。

closeAll(currentDropdown){ 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if(openDropdown != currentDropdown){ 
      openDropdown.classList.remove('show'); 
     } 
    } 
} 

您可以保存元素在数组中应该具有的状态，并在每次点击时应用所有这些状态。

// executed once on page load 
var dropdowns = new array(); 
var tmpdropdowns = document.getElementsByClassName("dropdown-content"); 
var i; 
for (i = 0; i < tmpdropdowns.length; i++) { 
    dropdowns[tmpdropdowns[i].id] = 0; 
} 


// executed on click of one button 
for (i = 0; i < dropdowns.length; i++) { 
    dropdowns[i] = 0; 
} 
dropdowns[/*clicked id*/] = (dropdowns[/*clicked id*/] + 1) % 2; 
for (var key in dropdowns) { 
    if(dropdowns[key] == 0) { 
     document.getElementById[key].classList.remove("show"); 
    } else { 
     document.getElementById[key].classList.add("show"); 
    } 
} 

Answer 4

问题是，在您拨打closeAll()之后，您会切换用户点击的下拉菜单，然后再次打开该下拉菜单。

您需要测试当前是否已经打开，而不是重新打开它。

/* When the user clicks on the button, 
 
    toggle between hiding and showing the dropdown content */ 
 
function myFunction() { 
 
    var isOpen = document.getElementById("myDropdown").classList.contains("show"); 
 
    closeAll(); 
 
    if (!isOpen) { 
 
    document.getElementById("myDropdown").classList.add("show"); 
 
    } 
 
} 
 

 
function myFunction2() { 
 
    var isOpen = document.getElementById("myDropdown2").classList.contains("show"); 
 
    closeAll(); 
 
    if (!isOpen) { 
 
    document.getElementById("myDropdown2").classList.toggle("show"); 
 
    } 
 
} 
 

 
function closeAll() { 
 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
    var i; 
 
    for (i = 0; i < dropdowns.length; i++) { 
 
    var openDropdown = dropdowns[i]; 
 
    openDropdown.classList.remove('show'); 
 
    } 
 
} 
 

 
// Close the dropdown menu if the user clicks outside of it 
 
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'); 
 

 
     } 
 
    } 
 
    } 
 
}

/* Dropdown Button */ 
 

 
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 

 
/* Dropdown button on hover & focus */ 
 

 
.dropbtn:hover, 
 
.dropbtn:focus { 
 
    background-color: #3e8e41; 
 
} 
 

 

 
/* The container <div> - needed to position the dropdown content */ 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 

 
/* Dropdown Content (Hidden by Default) */ 
 

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

 

 
/* Links inside the dropdown */ 
 

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

 

 
/* Change color of dropdown links on hover */ 
 

 
#myDropdown a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 

 
/* Show the dropdown menu (use JS to add this class to the .dropdown-content 
 
    container when the user clicks on the dropdown button) */ 
 

 
.show { 
 
    display: block; 
 
} 
 

 
#myDropdown2 { 
 
    min-width: 200px; 
 
    border: 4px solid red; 
 
} 
 

 
#myDropdown2 a:hover { 
 
    color: red; 
 
} 
 

 
.left-bar { 
 
    float: left; 
 
} 
 

 
.right-bar { 
 
    float: left; 
 
}

<div class="dropdown"> 
 
    <button onclick="myFunction()" class="dropbtn">Dropdown</button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div> 
 

 
<div class="dropdown"> 
 
    <button onclick="myFunction2()" class="dropbtn">Dropdown</button> 
 
    <div id="myDropdown2" class="dropdown-content"> 
 
    <div class="left-bar"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 

 
    <div class="right-bar"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 5

试试这个：删除另一个下拉菜单的类show当show元素的hasClass点击下拉菜单，你每次点击。因为是closeAll删除show在所有下拉列表。所以，你可以验证只删除show元素的hasClass。它防止dropdown的触发事件也

Array.prototype.indexOf.call(document.getElementById("myDropdown").classList, 'show')

它用来寻找hasClass

/* When the user clicks on the button, 
 
    toggle between hiding and showing the dropdown content */ 
 
function myFunction() { 
 
if(Array.prototype.indexOf.call(document.getElementById("myDropdown").classList, 'show')){ 
 
    document.getElementById("myDropdown").classList.toggle("show"); 
 
    document.getElementById("myDropdown2").classList.remove("show"); 
 
    } 
 
    else{ 
 
    closeAll(); 
 
    } 
 
    
 
} 
 

 
function myFunction2() {if(Array.prototype.indexOf.call(document.getElementById("myDropdown2").classList, 'show')){ 
 
    document.getElementById("myDropdown2").classList.toggle("show"); 
 
    document.getElementById("myDropdown").classList.remove("show"); 
 
    } 
 
    else{ 
 
    closeAll() 
 
    } 
 
    
 
} 
 

 
function closeAll() { 
 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
    var i; 
 
    for (i = 0; i < dropdowns.length; i++) { 
 
    var openDropdown = dropdowns[i]; 
 
    openDropdown.classList.remove('show'); 
 
    } 
 
} 
 

 
// Close the dropdown menu if the user clicks outside of it 
 
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'); 
 

 
     } 
 
    } 
 
    } 
 
}

/* Dropdown Button */ 
 

 
.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 

 
/* Dropdown button on hover & focus */ 
 

 
.dropbtn:hover, 
 
.dropbtn:focus { 
 
    background-color: #3e8e41; 
 
} 
 

 

 
/* The container <div> - needed to position the dropdown content */ 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 

 
/* Dropdown Content (Hidden by Default) */ 
 

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

 

 
/* Links inside the dropdown */ 
 

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

 

 
/* Change color of dropdown links on hover */ 
 

 
#myDropdown a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 

 
/* Show the dropdown menu (use JS to add this class to the .dropdown-content 
 
    container when the user clicks on the dropdown button) */ 
 

 
.show { 
 
    display: block; 
 
} 
 

 
#myDropdown2 { 
 
    min-width: 200px; 
 
    border: 4px solid red; 
 
} 
 

 
#myDropdown2 a:hover { 
 
    color: red; 
 
} 
 

 
.left-bar { 
 
    float: left; 
 
} 
 

 
.right-bar { 
 
    float: left; 
 
}

<div class="dropdown"> 
 
    <button onclick="myFunction()" class="dropbtn">Dropdown</button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div> 
 

 
<div class="dropdown"> 
 
    <button onclick="myFunction2()" class="dropbtn">Dropdown</button> 
 
    <div id="myDropdown2" class="dropdown-content"> 
 
    <div class="left-bar"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 

 
    <div class="right-bar"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
    </div> 
 
    </div> 
 
</div>