stackoom
  简体   繁体   中英

HTML drop down menu won't stay open when clicking on it

 原文  2017-03-17 09:34:30  5   3    javascript/ html/ css/ web

Question

I am creating a website for a college project using html and css and I am trying to add a dropdown menu. I followed a tutorial for this from w3Schools but for some reason when I click the button to open the menu it just won't stay open and disappears straight away. I have looked through my code as much as possible and I can't see what is wrong with it. Thanks

Here is my css code: 

body{
   background-color: black;
}

header, footer{
  color: black;
  background-color: red;
  padding: 1em;
  text-align: center;
}

.dropbtn{
  background-color: #FF0000;
  color: black;
  padding: 8px;
  font-size: 12px;
  border: none;
  cursor: pointer;
}

.confirmbtn {
  margin: 10px 0;
}

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

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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F6F6F6;
  min-width: 50px;
  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: #f1f1f1; }

.show { display: block; }

article{
  margin-left: 200px;
  border-left: 2px solid red;
  border-right: 2px solid red;
  padding: 1em;
  height: 600px;
  background-color: black;
  color: red;
  z-index: 1;
}

form{
   text-align: center;
}

textarea{
   display: block;
   margin-left: auto;
   margin-right: auto;
}

li{
  margin: 10px 0;
}

image{
  height: 100px;
}

nav{
   float: left;
   border-left: 2px solid red;
   max-width: 190px;
   padding: 1em;
   height: 600px;
   background-color: black;
}

Here is the html code of the page I am working on: 

<DOCTYPE! html>

<html>

<head>
<title> Purchase Games </title>
<link rel="stylesheet" href="style.css">

<script>

function submitData(){
   var firstname = document.forms["myForm"]["firstname"].value;
   var lastname = document.forms["myForm"]["lastname"].value;

   if(firstname == ""){
     alert("Please enter something as your first name.");
         return;
   }
   if(lastname == ""){
     alert("Please enter something as your last name. ");
     return;  
   }
}

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

window.onclick = function(event) {
   if(!event.target.matches('.dropbtn')){
      var dropdowns = document.getElementsByClassName("dropdown-content");
      for(var i = 0; i < dropdowns.length; i++){
         var openDropdown = dropdowns[i];
         if(openDropdown.classList.contains('show')){
             openDropdown.classList.remove('show');
         }
      }
   }
}

</script>
</head>

<body>
<div>

<header><h1> Games Collection </h1></header>

<nav>

<ul>
  <li><a href="index.htm"> Home </a></li>
  <li><a href="casual.htm"> Casual </a></li>
  <li><a href="shooter.htm"> Shooter </a></li>
  <li><a href="platformer.htm"> Platformer </a></li>
  <li><a href="purchase.htm"> Purchase Games </a></li>
</ul>

</nav>

<article> 
  <h1> Purchase Games </h1>
  <form name="myForm">
  First Name: <br>
  <input type="text" name="firstname"> <br> <br>
  Last Name <br>
  <input type="text" name="lastname"> <br> <br>

  <div class="dropdown">
  <button onclick="myFunction()" class="dropbtn"> Select Game Code </button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#"> FIFA </a>
        <a href="#"> FORZA </a>
    <a href="#"> POOL </a>
    <a href="#"> MINE </a>
    <a href="#"> PES </a>
    <a href="#"> CODMW </a>
        <a href="#"> TITAN </a>
    <a href="#"> TITAN2 </a>
    <a href="#"> BATTLE </a>
    <a href="#"> PLANT </a>
    <a href="#"> INSIDE </a>
    <a href="#"> TERRA </a>
    <a href="#"> MANY </a>
    <a href="#"> MARIO </a>
    <a href="#"> RYMAN </a>
  </div>
  </div>
  <br>
  <input type="submit" value="Confirm" class="confirmbtn" onclick="submitData()">
  <br> <br>
  </form>

  <textarea rows="10" cols="50" id="myTextArea">
  Once you purchase an item this is where it will appear
  </textarea>
</article>

<footer><h3> Created by Michael Shepherd (Use this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_filter" </h3></footer>

</div>
</body>

</html>

3 answers

solution1
 1 ACCPTED  2017-03-17 09:47:36

The default behaviour for a button is submit. So you need to specifically add 

<button type="button">Button</button>

So to your button add 

<button type="button" onclick="myFunction()" class="dropbtn"> Select Game Code </button>

Final code below

HTML 

<div>

  <header>
    <h1> Games Collection </h1></header>

  <nav>

    <ul>
      <li><a href="index.htm"> Home </a></li>
      <li><a href="casual.htm"> Casual </a></li>
      <li><a href="shooter.htm"> Shooter </a></li>
      <li><a href="platformer.htm"> Platformer </a></li>
      <li><a href="purchase.htm"> Purchase Games </a></li>
    </ul>

  </nav>

  <article>
    <h1> Purchase Games </h1>
    <form name="myForm">
      First Name:
      <br>
      <input type="text" name="firstname">
      <br>
      <br> Last Name
      <br>
      <input type="text" name="lastname">
      <br>
      <br>

      <div class="dropdown">
        <button type="button" onclick="myFunction()" class="dropbtn"> Select Game Code </button>
        <div id="myDropdown" class="dropdown-content">
          <a href="#"> FIFA </a>
          <a href="#"> FORZA </a>
          <a href="#"> POOL </a>
          <a href="#"> MINE </a>
          <a href="#"> PES </a>
          <a href="#"> CODMW </a>
          <a href="#"> TITAN </a>
          <a href="#"> TITAN2 </a>
          <a href="#"> BATTLE </a>
          <a href="#"> PLANT </a>
          <a href="#"> INSIDE </a>
          <a href="#"> TERRA </a>
          <a href="#"> MANY </a>
          <a href="#"> MARIO </a>
          <a href="#"> RYMAN </a>
        </div>
      </div>
      <br>
      <button type="submit" value="Confirm" class="confirmbtn" onclick="submitData()"></button>
      <br>
      <br>
    </form>

    <textarea rows="10" cols="50" id="myTextArea">
      Once you purchase an item this is where it will appear
    </textarea>
  </article>

  <footer>
    <h3> Created by Michael Shepherd (Use this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_filter" </h3></footer>

and a link to the JSfiddle

Just remember to keep your function myFunction() before the html. Which I see you have in the head.

solution2
 0  2017-03-17 09:39:01

Use Select Tag in Html For multiple value

Please refer this link.

solution3
 -2  2017-03-17 09:38:12

.dropdown-content
{
  display : none: // remove this line
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question My CSS/JS drop down menu won't stay down when I hover over the items Child menu won't open when clicking parent menu WebDriver Dropdown Menu Won't Stay Open how to get CSS drop down menus to stay open even when clicked outside the menu? Hide the drop down menu when clicking outside Drop down menu won't work Why doesn't my drop-down menu stay visible when I hover over it? The drop down doesent open on clicking on the menu icon but opens when i click a bit far from it bootstrap drop down menu doesn't open Close drop down menu when clicking outside menu
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM