jQuery-初识⑨

菜单案例

加一个全局标记——标记是展开还是收缩

代码

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        ul li{
            list-style-type: none;
        }
        #na{
            position: relative;
            left: 20px;
        }
    </style>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <!--声明js代码域-->
    <script type="text/javascript">
        //标记判断，是隐藏还是展开
        var flag = true;
        function testNa() {
            //点击国际动态的时候发生变化
            //toggle实现隐藏的时候出现，出现的时候隐藏，不需要判断
            // $("#na").toggle(1500);
            // $("#na").slideUp(1000);
            // alert($("#na").css("display"));//block
            // $("#na").slideDown(1000);
            // alert($("#na").css("display"));
            // $("#naImg").attr("src","image/three.png");
            // alert($("naImg").css("display"));
            if(flag){
                $("#na").slideUp(1000);
                flag = false;
            }else{
                $("#na").slideDown(1000);
                flag = true;
            }
        }
    </script>
</head>
<body >
    <h3>jQuery菜单案例</h3>
    <!--<hr>-->
    <ul>
        <img src="image/one.png" alt="" id="naImg">
        <label for="" onclick="testNa()">&nbsp;国际动态</label>
        <div id="na">
            <li><img src="image/two.png" alt=""><label for="" >国内新闻</label></li>
            <li><img src="image/two.png" alt=""><label for="">国际新闻</label></li>
        </div>
    </ul>
</body>
</html>

效果：

点击国际动态之后：再点一次又会出现

————————————————————————————————————————————————

添加两句让打开和关闭的时候最上面的图标改变

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        ul li{
            list-style-type: none;
        }
        #na{
            position: relative;
            left: 20px;
        }
    </style>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <!--声明js代码域-->
    <script type="text/javascript">
        //标记判断，是隐藏还是展开
        var flag = true;
        function testNa() {
            if(flag){
                $("#na").slideUp(1000);
                $("#naImg").attr("src","image/three.png");
                flag = false;
            }else{
                $("#na").slideDown(1000);
                flag = true;
                $("#naImg").attr("src","image/one.png");
            }
        }
    </script>
</head>
<body >
    <h3>jQuery菜单案例</h3>
    <ul>
        <img src="image/one.png" alt="" id="naImg">
        <label for="" onclick="testNa()">&nbsp;国际动态</label>
        <div id="na">
            <li><img src="image/two.png" alt=""><label for="" >国内新闻</label></li>
            <li><img src="image/two.png" alt=""><label for="">国际新闻</label></li>
        </div>
    </ul>
</body>
</html>

效果

————————————————————————————————————————————

换一种方法：事件不用onclick（）方法

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        ul li{
            list-style-type: none;
        }
        #na{
            position: relative;
            left: 20px;
        }
    </style>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <!--声明js代码域-->
    <script type="text/javascript">
        //标记判断，是隐藏还是展开
        var flag = true;
        //页面载入
        $(function () {
            //找到label标签-“国际动态”
            //子选择器
            // alert($("ul>label").html());
            $("ul>label").click(function(){
                if(flag){
                    $("#na").slideUp(1000);
                    $("#naImg").attr("src","image/three.png");
                    flag = false;
                }else{
                    $("#na").slideDown(1000);
                    flag = true;
                    $("#naImg").attr("src","image/one.png");
                }
            });
        })
        //页面载入
        // $(document).ready(function () {
        // })
    </script>
</head>
<body >
    <h3>jQuery菜单案例</h3>
    <ul>
        <img src="image/one.png" alt="" id="naImg">
        <label for="">国际动态</label>
        <div id="na">
            <li><img src="image/two.png" alt=""><label for="" >国内新闻</label></li>
            <li><img src="image/two.png" alt=""><label for="">国际新闻</label></li>
        </div>
    </ul>
</body>
</html>

效果还是实现收放

$("ul>label").bind("click",function(){//替换之后效果还能实现

——————————————————————————————————————————

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        ul li{
            list-style-type: none;
        }
        #na{
            position: relative;
            left: 20px;
        }
    </style>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <!--声明js代码域-->
    <script type="text/javascript">
        //标记判断，是隐藏还是展开
        var flag = false;
        //页面载入
        $(function () {
            //flag是false,当鼠标放上的时候执行slideDown
            $("ul>label").bind("mouseover",function(){
                if(flag){
                    $("#na").slideUp(1000);
                    $("#naImg").attr("src","image/three.png");
                    flag = true;
                }else{
                    $("#na").slideDown(1000);
                    $("#naImg").attr("src","image/one.png");
                    flag = false;
                }
            });
            $("ul>label").bind("mouseout",function () {
                if(!flag){
                    $("#na").slideUp(1000);
                    $("#naImg").attr("src","image/three.png");
                    flag = true;
                }else{
                    $("#na").slideDown(1000);
                    $("#naImg").attr("src","image/one.png");
                    flag = false;
                };
            });
        })
        //页面载入
        // $(document).ready(function () {
        // })
    </script>
</head>
<body >
    <h3>jQuery菜单案例</h3>
    <ul>
        <img src="image/one.png" alt="" id="naImg">
        <label for="">国际动态</label>
        <div id="na">
            <li><img src="image/two.png" alt=""><label for="" >国内新闻</label></li>
            <li><img src="image/two.png" alt=""><label for="">国际新闻</label></li>
        </div>
    </ul>
</body>
</html>

效果：

刷新页面：初始状态

鼠标滑过；再滑过又展开

————————————————————————————————————

<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        ul li{
            list-style-type: none;
        }
        #na{
            position: relative;
            left: 20px;
        }
    </style>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <!--声明js代码域-->
    <script type="text/javascript">
        //标记判断，是隐藏还是展开
        var flag = false;
        //页面载入
        $(function () {
            //flag是false,当鼠标放上的时候执行slideDown
            $("ul>label").bind("mouseover",function(){
                    $("#na").slideDown(1000);
                    $("#naImg").attr("src","image/one.png");
                    //flag = true;
            });
            $("ul>label").bind("mouseout",function () {
                    $("#na").slideUp(1000);
                    $("#naImg").attr("src","image/three.png");
                   // flag = true;
            });
        })
    </script>
</head>
<body >
    <h3>jQuery菜单案例</h3>
    <ul>
        <img src="image/one.png" alt="" id="naImg">
        <label for="">国际动态</label>
        <div id="na">
            <li><img src="image/two.png" alt=""><label for="" >国内新闻</label></li>
            <li><img src="image/two.png" alt=""><label for="">国际新闻</label></li>
        </div>
    </ul>
</body>
</html>

菜单案例

猜你喜欢