亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

三級下拉菜單案例

原創(chuàng) 2018-12-06 12:45:05 168
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三級下拉菜單</title> <script type="text/javascript" src="jq
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>三級下拉菜單</title>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        function unfold(li) {
            
            $(li).children("ul").show();
        };
        function fold(li) {
            
            $(li).children("ul").hide();
        }
        //隱藏所有ul
        $(document).ready(function(){
            $("div ul li ul").hide();
        });
 
    </script>
</head>
<body>
    <div style="width:200px;height:100px" >
        <ul><!-- 一級菜單 -->
            <li><a href="">首頁</a></li>
             <li onmousemove="unfold(this)" onmouseout="fold(this)"> <!-- 使用onmousemove和onmouseout實現(xiàn)鼠標移上時展開下拉菜單,鼠標移開時收縮下拉菜單功能 -->
                <a href="">編程語言</a>
                <ul><!-- 二級菜單 -->
                    <li onmousemove="unfold(this)" onmouseout="fold(this)">
                    	<a href="">JavaScript</a>
						<ul><!-- 三級菜單 --> 
							<li><a href="">jQuery</a></li>
							<li><a href="">AJAX</a></li>
							<li><a href="">JSON</a></li>
						</ul>
                    </li>
                    <li><a href="">C/C++</a></li>
                    <li><a href="">C#</a></li>
                </ul>
            </li>
            <li onmousemove ="unfold(this)" onmouseout="fold(this)" >
                <a href="">人工智能</a>
                <ul>
                    <li><a href="">機器學習</a></li>
                    <li><a href="">深度學習</a></li>
                    <li><a href="">語音識別</a></li>
                </ul>
            </li>
            <li onmousemove="unfold(this)" onmouseout="fold(this)">
                <a href="">移動開發(fā)</a>
                <ul>
                    <li><a href="">iOS</a></li>
                    <li><a href="">微信開發(fā)</a></li>
                    <li><a href="">Android</a></li>
                </ul>
            </li>

        </ul>
    </div>
</body>
</html>

使用onmousemove和onmouseout實現(xiàn)鼠標移上時展開下拉菜單,鼠標移開時收縮下拉菜單功能。

批改老師:天蓬老師批改時間:2018-12-06 13:13:45
老師總結(jié):本題主要是考察對鼠標移動事件的處理, 這些事件可以實現(xiàn)很多有用的功能

發(fā)佈手記

熱門詞條