0
2回のクリックで反応的なナビゲーションバー（4つのメニュー項目）を作成し始めました。さて、私は3番目を追加したいと思います。しかし、3つ目を追加するとドロップダウンしません。先ほどの誰かが私に2番目のもの（それも落ちなかった）を手伝ってくれました。だから私はちょうど2番目のものからJSをコピーすると思ったが、それは動作しませんでした。誰かが私が3番目のものもドロップダウンするために必要なことを教えてもらえますか？どうも！第3のクリックダウンメニュー項目が表示されない
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
/*If you bind 2 onclick then only last one will fire*/
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
removeShow("dropdown-content");
}
if (!event.target.matches('.dropbtn2')) {
removeShow("dropdown-content2");
}
}
function removeShow(className) {
var dropdowns = document.getElementsByClassName(className);
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show");
}/* Navigation */
.navbar-0 {
height: auto;
}
.navbar-1 {
text-align: center;
color: #FB4D4D;
padding: 0px;
}
.home,
.contact {
padding: 5px;
}
/* Dropdown Button */
.dropbtn {
text-align: center;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: white;
color: #FB4D4D;
padding: 0px;
margin: 0px;
border: none;
cursor: pointer;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
margin: 5px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
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: #FB4D4D;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 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;
border: none;
}
/*2e drop*/
/* Dropdown Button */
.dropbtn2 {
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: white;
color: #FB4D4D;
padding: 0px;
margin: 0px;
border: none;
cursor: pointer;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown2 {
position: relative;
margin: 5px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content2 {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content2 a {
color: #FB4D4D;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content2 a:hover {
background-color: #f1f1f1
}
/* 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;
border: none;
}
/*3e drop*/
/* Dropdown Button */
.dropbtn3 {
font-size: 15px;
font-family: 'Open Sans', sans-serif;
background-color: white;
color: #FB4D4D;
padding: 0px;
margin: 0px;
border: none;
cursor: pointer;
font-weight: bold;
}
/* The container <div> - needed to position the dropdown content */
.dropdown3 {
position: relative;
margin: 5px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content3 {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content3 a {
color: #FB4D4D;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content3 a:hover {
background-color: #f1f1f1
}
/* 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;
border: none;
}
button:focus {
outline: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-12 navbar-0">
<div class="col-10 col-container col-center-block navbar-1">
<div class="colom col-3 home"><strong><a href="index.php">HOME</a></strong></div>
<div class="colom col-3 dropdown aanbod">
<button onclick="myFunction()" class="dropbtn">ONS AANBOD</button>
<div id="myDropdown" class="dropdown-content col-12">
<a href="index.php?option=com_content&view=article&id=2">WebDesign</a>
<a href="index.php?option=com_content&view=article&id=6">Retoucheren</a>
</div>
</div>
<div class="colom col-3 dropdown2 portfolio">
<button onclick="myFunction2()" class="dropbtn2">PORTFOLIO</button>
<div id="myDropdown2" class="dropdown-content2 col-12">
<a href="index.php?option=com_content&view=article&id=4">Websites</a>
<a href="index.php?option=com_content&view=article&id=7">Retoucheringen</a>
</div>
</div>
<div class="colom col-3 dropdown spelers">
<button onclick="myFunction3()" class="dropbtn3">SPELERS</button>
<div id="myDropdown3" class="dropdown-content3 col-12">
<a href="index.php?option=com_content&view=article&id=2">A-Kern</a>
<a href="index.php?option=com_content&view=article&id=6">B-Kern</a>
</div>
</div>
<div class="colom col-3 contact"><strong><a href="index.php?option=com_content&view=article&id=8">CONTACT</a></strong></div>
</div>
</div>
をあなたはmyFunction3を呼び出しているが、それは定義されていません。 – airos