JQuery之简单下拉框

来源：互联网发布：graph cut算法原理编辑：程序博客网时间：2024/06/05 17:15

今天介绍的主题是如何用JQuery实现下拉框，话不多说，贴代码！

<!DOCTYPE html><html><script type="text/javascript" src="G://jquery-3.2.1.js"></script><head>    <title>下拉框</title></head><!--css--><style type="text/css">    nav > ul >li{        float: left;        text-align: center;        padding: 0 0.5em;     }    nav ul li .chengshi{        display: none;        padding-left: 0 !important;    }    ul{        list-style: none;    }    .chengshi li:hover{        background-color: black;    }</style><!--鼠标悬浮时，显示，移出则隐藏--><script type="text/javascript">    $(document).ready(function(){        $("nav li").hover(function(){            $(this).find(".chengshi").css("display","block");        },        function(){            $(this).find(".chengshi").css("display","none");           }        );    });</script><body>    <div>    <nav>        <ul>            <li>                <ul>一线城市                    <li class="chengshi">北京</li>                    <li class="chengshi">上海</li>                    <li class="chengshi">广州</li>                    <li class="chengshi">深圳</li>                </ul>            </li>            <li>                <ul>二线城市                    <li class="chengshi">武汉</li>                    <li class="chengshi">成都</li>                    <li class="chengshi">哈尔滨</li>                    <li class="chengshi">长沙</li>                </ul>            </li>        </ul>    </nav>    </div></body></html>

实现以上代码，就可以搞出一个简单下拉框了

阅读全文

0 0