JavaScript implementation of drop-down list

This article example shares the specific code of JavaScript to implement the drop-down list for your reference. The specific content is as follows

This time I wrote a relatively simple implementation of a drop-down list. Click to display the list content, and click again to disappear the list. After studying it for a long time, I found that this js writing method is indeed easier to use. Let’s take a look at the effect first.

Let’s go directly to the code. JS is the main part, and CSS can be debugged at will, but this writing method requires CSS.

1. HTML code

<body>
<!--Outermost layer-->
<div class="outer">
<!-- Inside -->
<div class="inner">
<h2>First</h2>
 <ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
 </ul>
</div>

<div class="inner">
 <h2>Second</h2>
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
 </ul>
</div>

<div class="inner">
 <h2>Second</h2>
 <ul>
  <li>4</li>
  <li>5</li>
  <li>6</li>
 </ul>
</div>

 <div class="inner">
  <h2>Second</h2>
  <ul>
   <li>7</li>
   <li>8</li>
   <li>9</li>
  </ul>
 </div>


<!-- Inside -->
</div>
<!--Outermost layer-->
</body>

2. CSS code

 .outer{
   margin: 0 auto;
   width: 500px;
   height: 600px;
   border: 1px solid red;
  }
  .outer .inner{
   width: 500px;
   border: 1px solid red;

  }
  .outer .inner ul{
   list-style: none;
   border: 1px solid fuchsia;
  }
  h2{
   border: 1px solid blueviolet;
   height: 30px;
   display: flex;
   justify-content: center;
   cursor: pointer;
   background-color: #74a400;
   margin: 0;
  }
  ul{
   display: none;
   

  }
  
 
  Here, .ul is not in HTML, so you need to add it through js.
   display: block;
   background-color: cornflowerblue;
   margin: 0;
  }
  ul li{
   border: 1px solid cornflowerblue;
   background-color: darkgray;
   display: flex;
   justify-content: center;
   margin-left: -42px;
   cursor: pointer;

}

3. The most important js code part

window.onload = function () {
  // Get h2 and ul
   var h2 = document.getElementsByTagName("h2");
   var ul = document.getElementsByTagName("ul");
   //Bind a click event to all h2 for (let i = 0; i <h2.length; i++) {
    h2[i].index = i;
    h2[i].onclick = function () {
 //The bound event is that if the ul at the same level as h2 does not have a classname, its classname will be named ul. If it does, its classname will be set to empty.
 //Through the css code, you can see that there is a .ul part that does not work, because js has not yet changed the corresponding h2 classname. It will only change when h2 is clicked.
 //This writing method does not directly change the CSS style content, but realizes the style change by changing the name. In this way, one style can be used many times without having to write the style repeatedly.
     if (ul[this.index].className == ""){
      ul[this.index].className = "ul";
     }else {
      ul[this.index].className = "";
     }
    }
 }
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js implements the method of selecting a value in the drop-down list (3 methods)
How to fill the content into the drop-down list after jquery uses ajax to get json data from the background
jquery+json universal three-level linkage drop-down list
The javascript year drop-down list box contains the current year and the 50 years before and after.
js to get the value and text value in the drop-down list box <option> sample code
extJs Add explanatory text behind the text box + trigger an event after selecting a value in the drop-down list
JavaScript cascading drop-down list example code (self-written)
How to display a multi-level tree menu in a drop-down list using javascript
JavaScript gets the text value in the drop-down list box sample code
Use js to implement an editable select drop-down list

<<: Install Apple Mac OS X in VMWare12 Graphic Tutorial

>>: Enable remote access rights for MySQL under Linux and open port 3306 in the firewall

Analysis of the principles of Mysql dirty page flush and shrinking table space

JavaScript implementation of drop-down list

Analysis of the principles of Mysql dirty page flush and shrinking table space

Detailed explanation of setting static ip network card for CentOS 8 VMware virtual machine to access the Internet

A detailed discussion of MySQL deadlock and logs

How to operate json fields in MySQL

Understand the principles of MySQL persistence and rollback in one article

Detailed explanation of the process of installing MySQL on Ubuntu 18.04.4

A thorough analysis of HTML special characters

In-depth explanation of special permissions SUID, SGID and SBIT in Linux

Javascript File and Blob Detailed Explanation

JS uses the reduce() method to process tree structure data

Recommend

Disable IE Image Toolbar

Detailed explanation of WordPress multi-site configuration under Nginx environment

MySQL 5.7.18 version free installation configuration tutorial

Learn the key knowledge that must be mastered in the Vue framework

HTML head tag detailed introduction

Detailed explanation of the principle of distributed locks and three implementation methods

A case study to thoroughly understand how to correctly use MySQL inndb joint index

Advanced Usage Examples of mv Command in Linux

What are the similarities between the development of web design and western architecture?

Native js to realize bouncing ball

Explanation of building graph database neo4j in Linux environment

How to start a Java program in docker

Nginx service 500: Internal Server Error one of the reasons

What kinds of MYSQL connection queries do you know?

Detailed explanation of the implementation principles of call, apply, and bind in JavaScript