时间戳

首页 > 解决方案 > My cssed Button that it's supposed to show up a list has function of sumbit

php - My cssed Button that it's supposed to show up a list has function of sumbit

问题描述

So i got a button that it's supposed when you click on it shows up a list to choice . But When i click on it , it attempts to sumbit the values in the text input .

Css 

 .dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer; 
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

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

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

the drop down button 

   <div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="ccmonth" class="dropdown-content">
<a href="#January">January</a>
<a href="#February">February</a>
<a href="#March">March </a>
<a href="#April">April</a>
<a href="#May">May</a>
<a href="#June">June</a>
<a href="#July">July</a>
<a href="#August">August</a>
<a href="#September">September</a>
<a href="#October">October</a>
<a href="#November">November</a>
<a href="#December">December</a>

Functions

 function myFunction() {
document.getElementById("ccmonth").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');

I really need this fixed , cause it's the half of my next project any help please

标签： phpcssbuttonmenudropdown

解决方案

我认为您的问题是该按钮位于表单内，因此当您单击它时，它会尝试提交。您可以维护您拥有的内容，但在 onclick 事件中您必须说不提交表单。它会是这样的：

window.onclick = function(event) {
   event.preventDefault();
   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');

推荐阅读