My Dropdown button doesn't work
Question
My dropdown button doesn't work anymore. I have a problem that the dropdown button only appears if I click on a certain part of the button. I tried to fix that, but now the dropdown doesn't work at all and I can't undo my changes. Can somebody help me out?
/*funktion für dropdown button*/ function myFunction() { document.getElementById('inhalt').classList.toggle('show'); } window.onclick = function (event) { if (!event.target.matches('.dropdiv')) { 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 Icon*/ .dropdiv { background-color: #001155; width: 40px; height: 22px; } .dropdivs{ height: 4px;width: 29px; background-color: white; color: white; border: #001155; border-radius: 5px; margin: 2px; } /* Dropdown Button */ .dropbutton { background-color: #001155; color: white; padding: 13px; font-size: 14px; border: none; cursor: pointer; } /*dropdown*/ .dropdown { position: absolute; display: inline-block; top: 0; right: 0; } /*dropdown Inhalt*/ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); right:0; } /* Dropdown Links*/ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .show {display:block;}
<div class="dropdown"> <button class="dropbutton"> <div class="dropdiv"> <div class="dropdivs"></div> <div class="dropdivs"></div> <div class="dropdivs"></div> </div> </button> <div id="inhalt" class="dropdown-content"> <a href="https://www.google.ch/">Google</a> <a href="https://intranet.swisscom.com/home/#/">Intranet</a> <a href="https://www.facebook.com/">Facebook</a> </div> </div> <p class="title">CRUD APP</p>
2 answers
solution1
1 ACCPTED 2016-09-05 07:54:53
Try this :
$(document).ready(function(){
$(".dropdown").on("click",function(){
$(".dropdown-content").toggle(500);
})
})
Final code :
<html> <title>This is test</title> <head> <style> .dropdiv { background-color: #001155; width: 40px; height: 22px; } .dropdivs{ height: 4px; width: 29px; background-color: white; color: white; border: #001155; border-radius: 5px; margin: 2px; } /* Dropdown Button */ .dropbutton { background-color: #001155; color: white; padding: 13px; font-size: 14px; border: none; cursor: pointer; } /*dropdown*/ .dropdown { position: absolute; display: inline-block; top: 0; right: 0; } /*dropdown Inhalt*/ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); right:0; } /* Dropdown Links*/ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .show {display:block;} </style> </head> <body> <div class="dropdown"> <button class="dropbutton"> <div class="dropdiv"> <div class="dropdivs"></div> <div class="dropdivs"></div> <div class="dropdivs"></div> </div> </button> <div id="inhalt" class="dropdown-content"> <a href="https://www.google.ch/">Google</a> <a href="https://intranet.swisscom.com/home/#/">Intranet</a> <a href="https://www.facebook.com/">Facebook</a> </div> </div> <p class="title">CRUD APP</p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function(){ $(".dropdown").on("click",function(){ $(".dropdown-content").toggle(500); }) }) </script> </body> </html>
solution2
1 2016-09-05 08:00:25
Since you are not using jquery but pure javascript this is the fixed code!
/*funktion für dropdown button*/ function myFunction() { document.getElementById('inhalt').classList.toggle('show'); } document.querySelector('.dropbutton').onclick = function (event) { var dropdowns = document.querySelectorAll('.dropdown-content'); var i; for (i = 0; i < dropdowns.length; i++) { alert(); var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); }else{ openDropdown.classList.add('show'); } } }
/*Dropdown Icon*/ .dropdiv { background-color: #001155; width: 40px; height: 22px; } .dropdivs{ height: 4px; width: 29px; background-color: white; color: white; border: #001155; border-radius: 5px; margin: 2px; } /* Dropdown Button */ .dropbutton { background-color: #001155; color: white; padding: 13px; font-size: 14px; border: none; cursor: pointer; } /*dropdown*/ .dropdown { position: absolute; display: inline-block; top: 0; right: 0; } /*dropdown Inhalt*/ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); right:0; } /* Dropdown Links*/ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .show {display:block;}
<div class="dropdown"> <button class="dropbutton"> <div class="dropdiv"> <div class="dropdivs"></div> <div class="dropdivs"></div> <div class="dropdivs"></div> </div> </button> <div id="inhalt" class="dropdown-content"> <a href="https://www.google.ch/">Google</a> <a href="https://intranet.swisscom.com/home/#/">Intranet</a> <a href="https://www.facebook.com/">Facebook</a> </div> </div> <p class="title">CRUD APP</p>
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
Dropdown doesn't work
Why doesn't my submit button work?
why my switch button doesn't work
Twitter bootstrap: button style doesn't work on dropdown menu
Why doesn't Bootstrap button dropdown work on iOS?
how to make my dropdown menu work correctly (dropdown link doesn't work)
Attr does work, but removeAttr doesn't seem to work on my button
Dropdown Div Doesn't Work
Bootstrap dropdown doesn't work
Bootstrap dropdown doesn't work?
Related Tags