2017-09-06 192 views
0

我开始用两次点击写下响应式导航栏(4菜单项)。现在,我想补充第三个。但是当我添加第三个时,它不会下拉。早些时候,有人帮助我第二个(也没有下降),它的工作原理。所以我认为我只是从第二个JS复制JS,但没有奏效。有人可以告诉我为了让第三人也能下拉我需要做什么吗?谢谢!第三次点击下拉菜单项不会下降

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>

+0

要调用myFunction3,但它没有定义。 – airos

回答

1

要调用myFunction3但没有定义,你有 JS创建myFunction3。

function myFunction3() { 
    document.getElementById("myDropdown3").classList.toggle("show"); 
} 

欣赏如果有用。

+0

谢谢,这个作品完美!我在这段代码中没有包含myFunction3的原因是因为我尝试了类似于您的代码的东西,但它不起作用。 – vanberla

0

你的onClick按钮应该是...

<button onclick="myFunction('myDropdown')" class="dropbtn">ONS AANBOD</button> 
<button onclick="myFunction('myDropdown2')" class="dropbtn">PORTFOLIO</button> 
<button onclick="myFunction('myDropdown3')" class="dropbtn">SPELERS</button> 

...和你的功能myFunction应该是这样的:

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