Javascript ve HTML - Bir açılır menünün eklenmesi, burada ne yapıyorum?

Açılan menüleri W3Schools'dan kopyaladım ve sınıf adlarını/kimliklerini değiştirdim, böylece kodumda kullanabilirim.Javascript ve HTML - Bir açılır menünün eklenmesi, burada ne yapıyorum?

yanlış yapıyorum:

İki şey var mı?
For-loop nedir, for-in, ne yapar? Bir tarafından artırmanın amacı nedir?

HTML:

<body> 
    <nav class = "header"> 
     <div id = "logo"> <a href = "ee"/> </a> </div> 
     <ul> 
      <li class = "nav_li" id= "cata_li" onclick = "myFunction()"> 
      <a class ="nav_a" href="ee"> Find <br/> Poop</a> 
       <ul class = "dropdown_menu"> 
        <li> <a href = "#"> Horse poop </a> </li> 
       </ul> 
      </li>

JavaScript:

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

// Close the dropdown if the user clicks outside of it 
window.onclick = function(event) { 
    if (!event.target.matches(".nav_li")) { 
    var dropdowns = document.getElementsByClassName("dropdown_menu"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
     } 
    } 
    } 
}

CSS (Benim CSS hala aynı görünüyor, emin burada hiçbir şey yanlıştır değilim):

.header > ul{ 
    display: inline-block; 
    position: absolute; 
    top: 0px; 
    left: 250px; 
} 

.header> ul > li{ 
    display: inline-block; 
    list-style: none; 
    vertical-align: top; 
} 

.dropdown_menu{ 
    position: absolute; 
    display: none; 
    z-index: 40; 
    top:50px; 
    left:0; 
    background-color: #222; 
    width: 300px; 
    list-style: none; 
    padding: 10px; 
}

kaynak

2016-03-20 Matthew Francis

Burada 2 sorun var, nav_a, varsayılan eylemi href değerine gitmek olan bir bağlantı elemanıdır, burada bunu engellemeniz gerekir.

Ayrıca matches işlevi yalnızca geçerli elemanı kontrol edecektir, bunu bu kadar yerine

function myFunction(event) { 
 
    event.preventDefault(); 
 
    document.querySelector("#cata_li .dropdown_menu").classList.toggle("show"); 
 
} 
 

 
// Close the dropdown if the user clicks outside of it 
 
window.onclick = function(event) { 
 
    if (!event.target.closest(".nav_li")) { 
 
    var dropdowns = document.getElementsByClassName("dropdown_menu"); 
 
    var i; 
 
    for (i = 0; i < dropdowns.length; i++) { 
 
     var openDropdown = dropdowns[i]; 
 
     if (openDropdown.classList.contains('show')) { 
 
     openDropdown.classList.remove('show'); 
 
     } 
 
    } 
 
    } 
 
}

.header > ul { 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 250px; 
 
} 
 
.header> ul > li { 
 
    display: inline-block; 
 
    list-style: none; 
 
    vertical-align: top; 
 
} 
 
.dropdown_menu { 
 
    position: absolute; 
 
    display: none; 
 
    z-index: 40; 
 
    top: 50px; 
 
    left: 0; 
 
    background-color: #222; 
 
    width: 300px; 
 
    list-style: none; 
 
    padding: 10px; 
 
} 
 
.dropdown_menu.show { 
 
    display: block; 
 
}

<nav class="header"> 
 
    <div id="logo"> 
 
    <a href="ee"></a> 
 
    </div> 
 
    <ul> 
 
    <li class="nav_li" id="cata_li" onclick="myFunction(event)"> 
 
     <a class="nav_a" href="ee"> Find <br/> Poop</a> 
 
     <ul class="dropdown_menu"> 
 
     <li> <a href="#"> Horse poop </a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

kaynak

2016-03-20 05:19:30

Hank .closest() kullandığınız bir nav_li öğesinin içinde tıklandığı olup olmadığını kontrol etmek gerekiyor! ama benim için ne anlama geldiğini söyler misin? Amacı yok –

Javascript ve HTML - Bir açılır menünün eklenmesi, burada ne yapıyorum?

cevap

İlgili konular