[英]How do I make a clickable dropdown button with javascript and css?
I am trying to make a clickable button.我正在尝试制作一个可点击的按钮。 In the code down below you can see five buttons.
在下面的代码中,您可以看到五个按钮。 The one I am programming with now is the first one (The one with the "Dropdown1" ID).
我现在正在编程的是第一个(具有“Dropdown1”ID 的那个)。 In the bottom you can see the JavaScript code I use.
在底部您可以看到我使用的 JavaScript 代码。 I don't understand why this doesn't work.
我不明白为什么这不起作用。 For my CSS codes I have created separate files.
对于我的 CSS 代码,我创建了单独的文件。 When I test this on the website, nothing happens when I click the first button.
当我在网站上对此进行测试时,单击第一个按钮时没有任何反应。 The text that is supposed to show/hide doesn't show/hide.
应该显示/隐藏的文本不显示/隐藏。
<div class="ompanama" id="femsteder" class="dropdownmain">
<h1 id="liste-overskrift">5 fine steder i Panama</h1>
<ul id="liste">
<button onclick="Function1" class="dropbtn"><li>San Blas-øyene</li></button><br>
<div id="Dropdown1" class="dropdownContent">
<p>gfghkdfghjkjfdhgkfdhgdkfugh</p>
</div>
<button onclick="Function2" class="dropbtn"><li>Panama City</li></button><br>
<div id="Dropdown2" class="dropdownContent">
<p>gfghkdfghjkjfdhgkfdhgdkfugh</p>
</div>
<button onclick="Function3" class="dropbtn"><li>Gatúnsjøen</li></button><br>
<div id="Dropdown3" class="dropdownContent">
<p>gfghkdfghjkjfdhgkfdhgdkfugh</p>
</div>
<button onclick="Function4" class="dropbtn"><li>Chagres Nasonalpark</li></button><br>
<div id="Dropdown4" class="dropdownContent">
<p>gfghkdfghjkjfdhgkfdhgdkfugh</p>
</div>
<button onclick="Function5" class="dropbtn"><li>Darién Nasjonalpark</li></button><br>
<div id="Dropdown5" class="dropdownContent">
<p>gfghkdfghjkjfdhgkfdhgdkfugh</p>
</div>
</ul>
</div>
<script type="text/javascript">
function Function1() {
var x = document.getElementById("Dropdown1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
Here is a example to achieve you requirement这是一个满足您要求的示例
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").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'); } } } }
/* Dropdown Button */.dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* Dropdown button on hover & focus */.dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } /* 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: #f1f1f1; min-width: 160px; 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 */.dropdown-content a:hover {background-color: #ddd} /* 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;}
<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="ompanama dropdownmain" id="femsteder"> <h1 id="liste-overskrift">5 fine steder i Panama</h1> <ul id="liste"> <button onclick="Function1()" class="dropbtn"> <li>San Blas-øyene</li> </button> <br> <div id="Dropdown1" class="dropdownContent"> <p>gfghkdfghjkjfdhgkfdhgdkfugh</p> </div> <button onclick="Function2()" class="dropbtn"> <li>Panama City</li> </button> <br> <div id="Dropdown2" class="dropdownContent"> <p>gfghkdfghjkjfdhgkfdhgdkfugh</p> </div> <button onclick="Function3()" class="dropbtn"> <li>Gatúnsjøen</li> </button> <br> <div id="Dropdown3" class="dropdownContent"> <p>gfghkdfghjkjfdhgkfdhgdkfugh</p> </div> <button onclick="Function4()" class="dropbtn"> <li>Chagres Nasonalpark</li> </button> <br> <div id="Dropdown4" class="dropdownContent"> <p>gfghkdfghjkjfdhgkfdhgdkfugh</p> </div> <button onclick="Function5()" class="dropbtn"> <li>Darién Nasjonalpark</li> </button> <br> <div id="Dropdown5" class="dropdownContent"> <p>gfghkdfghjkjfdhgkfdhgdkfugh</p> </div> </ul> </div> <script type="text/javascript"> function Function1() { var x = document.getElementById("Dropdown1"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script>
onclick=" Function1 " should be onclick=" Function1() " onclick=" Function1 " 应该是 onclick=" Function1() "
You need to add parentheses您需要添加括号
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.