如何用JavaScript和css实现一个可以下拉也可以收回的下拉框

图片说明

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    li{
        list-style-type:none;
    }
    </style>
</head>

<body>
    <ul>
        <li id="toggles">下拉隐藏和显示</li>
    </ul>
    <ul id="xx">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $("#toggles").on('click',function(){
        $("#xx").toggle();
    })
    // .toggle("normal",function(){
    //     $("#xx").show();
    // })
</script>
</html>

http://www.w3school.com.cn/jquery/effect_toggle.asp
使用toggle试试看

<!DOCTYPE html>



Document
<br> li{<br> list-style-type:none;<br> }<br>



  • 下拉隐藏和显示



  • 1

  • 2

  • 3


$("#toggles").on('click',function(){ $("#xx").toggle(); }) // .toggle("normal",function(){ // $("#xx").show(); // })

<!DOCTYPE html>



Document
<br> li{<br> list-style-type:none;<br> }<br>



  • 下拉隐藏和显示



  • 1

  • 2

  • 3


$("#toggles").on('click',function(){ $("#xx").toggle(); })