Jquery dropdown menu explanation

i'm very new to javascript/jquery and don't quite understand it yet. I'm trying to learn dropdown menus using jquery and i found this w3school tutorial, however, i can't seem to understand some parts of the code http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown

I mean i understand pretty much everything up to this

    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');
      }
    }
  }
}

I know what a for loop is and how it works but i don't understand how i work when it comes to divs from html file. For example var dropdowns has a div with a class of dropdown-content in it. Then this var is used in a for loop with a length property, but i don't understand what is a length of that var..Is it 1? And then the line with var openDropdown = dropdowns[i] this? The var i is 0 but what does it take from var dropdowns?

---

   var dropdowns = document.getElementsByClassName("dropdown-content");

this returns you an object that you can iterate with index (being 0,1... depending upon number of matched elements returned...)

also as value of i is initialized with 0...using dropdown[i] will exactly turn into dropdown[0] also if you have more matches it will do the job as well rather than writing the same thing all over again..

Hope thats helps...:D

链接地址: http://www.djcxy.com/p/74998.html

上一篇: 按钮onclick不执行功能

下一篇: jquery下拉菜单的解释