How to set the drop-down box to show and hide effects by jQuery
This article introduces the knowledge of "how to set the drop-down box to show and hide effects in jQuery". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
JQuery's hide () and show () methods are used to hide and show HTML elements, respectively, while the toggle () method toggles hide () and show () methods, that is, to show hidden elements and hide displayed elements.
$("select") .hide (); / / hide the drop-down box $("select") .show (); / / Show the drop-down box $("select") .toggle (); / / hide the drop-down box if it is displayed, and vice versa
The sample code is as follows
1. Create a Html element
Click the button to show or hide the drop-down box: please select an item if I don't choose it.
two。 Set css styl
Div.box {width:300px;padding:20px;margin:20px;border:4px dashed # ccc;} div.box span {color:#999;font-style:italic;} div.content {select {width:150px;height:30px;border:1px solid # ccc;} div.box span {color:#999;font-style:italic;} div.content {select {type = 'button'] {height:30px;margin:10px;padding:5px 10px;}
3. Write jquery code
$(function () {$("select") .hide (); / / default hide drop-down box $(": button") .click (function () {$("select") .toggle (); / / if it is already shown, it will be hidden; if hidden, it will show $(this) .val ($(this) .val () = "Show"? "hide": "Show");})})
4. Observation effect
Initial state, select is hidden by default
Select appears when you click the display button, and the description text of the button changes to "hidden"
Click "hide" and select disappears and returns to its original state.
This is the end of the content of "how to set the drop-down box to show and hide effects in jQuery". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
