How to implement drop-down menu with jquery

Method: 1. Use two div elements to set the first-level element and the second-level element; 2. Add a click event to the first-level element and use slideToggle to set the event processing function. The syntax is "first-level element object. click(function(){secondary element object.slideToggle();})".

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

How to use jquery to implement a drop-down menu

1. First, write two div tags in hbuilder and give them an id name. Here I will set their id names as one and onemenu.

Then we set the css style with the id of one. Here I set it to sky blue.

After that, we set the css style of onemenu. In order to distinguish it, I set it to red.

After that, let’s preview the effect. You can see that there are two parts: sky blue and red. Then all we have to do is click the mouse on the blue part and the red part. will fold upwards, and click the blue part again, the red part will move downwards.

#2. Then use the jQuery method to bind a click event to the div where one is located. Then bind an anonymous function to click.

Then write the method in the anonymous function, jQuery. Now let me explain this statement. jQuery means that the div element with the ID of onemenu is obtained. When the event is triggered, the element will call the slideToggle method. slideToggle can set the time. Here I set it to 3000 milliseconds, which is equivalent to 3 seconds.

<script>
$(document).ready(function(){
$("#one").click(function(){
$("#onemenu").slideToggle(3000);
});
});
</script>

In this way, when we click on the blue part, the red part will slowly slide up to hide, and when we click again, it will slowly slide down to display. Because this is a static picture, the sliding effect cannot be seen. You can practice to see the effect.

Recommended related video tutorials: jQuery video tutorial

The above is the detailed content of How to implement drop-down menu with jquery. For more information, please follow other related articles on the PHP Chinese website!