jQuery-First knowledge 9

Menu Case

加加一个全球标记——Marking is expanding or shrinking

<!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>
    <!--Declare js code field -->
    <script type="text/javascript">
        / / Mark judgment, is hidden or unfolded
        Var flag = true;
        Function testNa() {
            //Change when clicking on international dynamics
            //toggle appears when hiding, hidden when it appears, no need to judge
            // $("#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 menu case</h3>
    <!--<hr>-->
    <ul>
        <img src="image/one.png" alt="" id="naImg">
        <label for="" onclick="testNa()">&nbsp;International News</label>
        <div id="na">
            <li><img src="image/two.png" alt=""><label for="" >Domestic News</label></li>
            <li><img src="image/two.png" alt=""><label for="">International News</label></li>
        </div>
    </ul>
</body>
</html>

效果:

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

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

Add two sentences to change the top icon when opening and closing

<!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>
    <!--Declare js code field -->
    <script type="text/javascript">
        / / Mark judgment, is hidden or unfolded
        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 menu case</h3>
    <ul>
        <img src="image/one.png" alt="" id="naImg">
        <label for="" onclick="testNa()">&nbsp;International News</label>
        <div id="na">
            <li><img src="image/two.png" alt=""><label for="" >Domestic News</label></li>
            <li><img src="image/two.png" alt=""><label for="">International News</label></li>
        </div>
    </ul>
</body>
</html>

效果

       

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

换一个方法: The event does not need the onclick() method

<!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>
    <!--Declare js code field -->
    <script type="text/javascript">
        / / Mark judgment, is hidden or unfolded
        Var flag = true;
        //page loading
        $(function () {
            //Found the label tag - "International Dynamics"
            //sub selector
            // 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");
                }
            });
        })
        //page loading
        // $(document).ready(function () {
        // })
    </script>
</head>
<body >
    <h3>jQuery menu case</h3>
    <ul>
        <img src="image/one.png" alt="" id="naImg">
        <label for="">International News</label>
        <div id="na">
            <li><img src="image/two.png" alt=""><label for="" >Domestic News</label></li>
            <li><img src="image/two.png" alt=""><label for="">International News</label></li>
        </div>
    </ul>
</body>
</html>

The effect is still achieved

$("ul>label").bind("click",function(){//The effect can be achieved after replacement

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

<!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>
    <!--Declare js code field -->
    <script type="text/javascript">
        / / Mark judgment, is hidden or unfolded
        Var flag = false;
        //page loading
        $(function () {
            //flag is false, execute slideDown when the mouse is on
            $("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;
                };
            });
        })
        //page loading
        // $(document).ready(function () {
        // })
    </script>
</head>
<body >
    <h3>jQuery menu case</h3>
    <ul>
        <img src="image/one.png" alt="" id="naImg">
        <label for="">International News</label>
        <div id="na">
            <li><img src="image/two.png" alt=""><label for="" >Domestic News</label></li>
            <li><img src="image/two.png" alt=""><label for="">International News</label></li>
        </div>
    </ul>
</body>
</html>

效果:

Refresh page: initial state

鼠标滑过;   再滑过又展开

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

<!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>
    <!--Declare js code field -->
    <script type="text/javascript">
        / / Mark judgment, is hidden or unfolded
        Var flag = false;
        //page loading
        $(function () {
            //flag is false, execute slideDown when the mouse is on
            $("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 menu case</h3>
    <ul>
        <img src="image/one.png" alt="" id="naImg">
        <label for="">International News</label>
        <div id="na">
            <li><img src="image/two.png" alt=""><label for="" >Domestic News</label></li>
            <li><img src="image/two.png" alt=""><label for="">International News</label></li>
        </div>
    </ul>
</body>
</html>