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

JavaScript implementation of drop-down list

Write a formal blog using XHTML CSS

Detailed explanation of MySQL backup process using Xtrabackup

Vue3.0 implements the magnifying glass effect case study

Axios project with 77.9K GitHub repository: What are the things worth learning?

Prometheus monitors MySQL using grafana display

How to make React components full screen

Understanding JSON (JavaScript Object Notation) in one article

A simple and in-depth study of async and await in JavaScript

Alibaba Cloud ESC Server Docker Deployment of Single Node Mysql

Detailed explanation of Vue project optimization and packaging

Recommend

An article teaches you how to implement VUE multiple DIVs and button binding enter events

In-depth explanation of MySQL common index and unique index

How to install redis5.0.3 in docker

How to make select support readonly when the background cannot read data when the disabled attribute is set

Solution to the problem that docker nginx cannot be accessed after running

Implementing license plate input function in WeChat applet

Tutorial on how to connect and use MySQL 8.0 in IDEA's Maven project

A brief discussion on the definition and precautions of H tags

Interviewers often ask questions about React's life cycle

Issues with upgrading Python and installing Mongodb drivers under Centos

MySQL replication detailed explanation and simple example

How to add double quotes in HTML title

MySQL 4G memory server configuration optimization

HTML hyperlink a tag_Powernode Java Academy

Getting Started with Website Building for Beginners - The Conditions and Tools Needed to Build a Website