zoukankan      html  css  js  c++  java
  • 案例:新浪下拉菜单功能

    <!-- 页面布局 -->
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论/a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论/a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="#">私信</a>
                </li>
                <li>
                    <a href="#">评论/a>
                </li>
                <li>
                    <a href="#">@我</a>
                </li>
            </ul>
       </li>
    </ul>
    <!-- JS逻辑代码 -->
    <script>
        $(function() {
            // 鼠标经过
            $(".nav>li").mouseover(function() {
                // $(this) 表示jQuery的当前元素,注意this不要加引号
                // show()显示元素  hide()隐藏元素
                $(this).children('ul').show();
            });
            // 鼠标离开
            $(".nav>li").mouseout(function() {
                $(this).children('ul').hide();
            });
        })
    </script>
  • 相关阅读:
    线段树
    数学建模中的excel操作
    POJ 3666 Making the Grade
    POJ 1742 Coins
    CF 55D
    POJ 3280 Cheapest Palindrome
    牛客 处女座与复读机
    牛客 处女座的约会
    牛客 小a与星际探索
    POJ 2229 递推
  • 原文地址:https://www.cnblogs.com/zcy9838/p/12984999.html
Copyright © 2011-2022 走看看