我的下拉按钮不起作用

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>

Answer 1

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>

Answer 2

Since you are not using jquery but pure javascript this is the fixed code! 由于您不是使用jquery而是纯JavaScript，因此这是固定代码！

 /*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>

我的下拉按钮不起作用

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-09-05 07:54:53

解决方案2
1 2016-09-05 08:00:25

我的下拉按钮不起作用

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-09-05 07:54:53

解决方案2 1 2016-09-05 08:00:25

解决方案1
1 已采纳 2016-09-05 07:54:53

解决方案2
1 2016-09-05 08:00:25