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>
  • 相关阅读:
    [HNOI2019]JOJO
    [TJOI2019]唱、跳、rap和篮球
    [ZJOI2019]开关
    jzoj5746
    [JSOI2019]神经网络(指数生成函数)
    [TJOI2019]甲苯先生的线段树
    [JSOI2019]节日庆典
    XSY1519
    XSY1528
    springboot actuator监控笔记
  • 原文地址:https://www.cnblogs.com/zcy9838/p/12984999.html
Copyright © 2011-2022 走看看