JavaScript simulation drop-down menu code_form effects-JS Tutorial-php.cn

JavaScript simulation drop-down menu code_form effects

WBOY

Release： 2016-05-16 18:58:19

Original

1259 people have browsed it

Advantages: Clicking the body area can also hide the drop-down menu, and it will not conflict with the existing onclick event of the body.
Disadvantages: Please point them out and accept them with an open mind!
The code of the run box seems to be numerous, which is really frustrating. Please download the attachment for better observation or modification~!

<h1>JavaScript simulates a drop-down menu, done in a hurry, accept criticism humbly. </h1>
<form action="#" method="get">
<div class="dropDownList">
    <div id="dropDownList1" class="dropdown">
        <select name="birthday">
            <option>Please select</option>
            <option>1988</option>
            <option>1989</option>
        </select>
        <span>Please select a year</span>
        <ul></ul>
    </div>
    <div id="dropDownList2" class="dropdown">
        <select name="sex">
            <option>Gender</option>
            <option>Male</option>
            <option>Female</option>
        </select>
        <span>Please select gender</span>
        <ul></ul>
    </div>
    <div id="dropDownList3" class="dropdown">
        <select name="student">
            <option>Kindergarten class</option>
            <option>Primary School</option>
            <option>Junior High School</option>
        </select>
        <span>Please select your education level</span>
        <ul></ul>
    </div>
</div>
</form>