JavaScript implementation of drop-down list

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

Recommend

A brief discussion on VUE uni-app conditional coding and page layout

Table of contents Conditional compilation Page La...

Tomcat Nginx Redis session sharing process diagram

1. Preparation Middleware: Tomcat, Redis, Nginx J...

How to configure Linux firewall and open ports 80 and 3306

Port 80 is also configured. First enter the firew...

JS code to achieve page switching effect

This article example shares the specific code of ...

Introduction to the use of MySQL performance stress benchmark tool sysbench

Table of contents 1. Introduction to sysbench #Pr...

Detailed explanation of two quick ways to write console.log in vscode

(I) Method 1: Define it in advance directly in th...

Docker learning method steps to build ActiveMQ message service

Preface ActiveMQ is the most popular and powerful...

A brief discussion on how to elegantly delete large tables in MySQL

Table of contents 1. Truncate operation 1.1 What ...

jQuery implements dynamic tag event

This article shares the specific code of jQuery t...

Installation of various versions of MySQL 8.0.18 and problems encountered during installation (essence summary)

Summary: Problem solving records of MYSQL: No mat...

Sqoop export map100% reduce0% stuck in various reasons and solutions

I call this kind of bug a typical "Hamlet&qu...

Design and implementation of supermarket commodity management system based on Mysql+JavaSwing

Table of contents 1. Function Introduction 2. Key...

The docker prune command can be used to periodically clean up infrequently used data

Table of contents docker system df docker system ...

MySQL 8.0.11 compressed version installation tutorial

This article shares the installation tutorial of ...

Vue two same-level components to achieve value transfer

Vue components are connected, so it is inevitable...