jQuery或Angular实现弹出框单击显示，双击隐藏

用jQuery实现：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .menu_level1{
            width:500px;
            height:auto;
            margin:50px auto;
        }
        .menu_level1>li{
            position: relative;
            float: left;
            list-style-type: none;
            height:30px;
        }
        .menu_level1>li>a{
            padding:10px 15px;
            font-size:16px;
        }
        .menu_level2{
            position:absolute;
            top:30px;
            left:0;
            padding:20px;
            height:100px;
            background-color:#fff;
            border:1px solid #ccc;
            border-radius:5px;
            box-shadow: 2px 2px 2px #eee;
            display: none;
        }
        .menu_level1>li:hover{
            background-color:pink;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul class="menu_level1">
        <li><a>哈哈</a></li>
        <li><a>嘿嘿</a></li>
        <li><a>呼呼</a></li>
        <li><a>点我</a>
          <div class="menu_level2">哈罗，我是一块板砖，哪里需要哪里搬。。。。。</div>
        </li>
    </ul>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
    $(".menu_level1 li").click(function(){
        if($(this).hasClass("curr")){
            $(this).removeClass("curr");
            $(".menu_level2").hide();
        }else{
            $(".menu_level2").show();
            $(this).addClass("curr");
        }
    });
    $(document).click(function(e){
        var target = $(e.target);
        if(target.closest(".menu_level1").length != 0) return;
        $(".menu_level2").hide();

    });
</script>
</html>

 

然而，用angular实现，轻松的几句代码即可完成

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .menu_level1{
            width:500px;
            height:auto;
            margin:50px auto;
        }
        .menu_level1>li{
            position: relative;
            float: left;
            list-style-type: none;
            height:30px;
        }
        .menu_level1>li>a{
            padding:10px 15px;
            font-size:16px;
        }
        .menu_level2{
            position:absolute;
            top:30px;
            left:0;
            padding:20px;
            height:100px;
            background-color:#fff;
            border:1px solid #ccc;
            border-radius:5px;
            box-shadow: 2px 2px 2px #eee;
        }
        .menu_level1>li:hover{
            background-color:pink;
            cursor: pointer;
        }
    </style>
</head>
<body ng-controller="myCtrl">
    <ul class="menu_level1">
        <li><a>哈哈</a></li>
        <li><a>嘿嘿</a></li>
        <li><a>呼呼</a></li>
        <li ng-click="show()"><a>点我</a>
          <div class="menu_level2" ng-show="showDiv">哈罗，我是一块板砖，哪里需要哪里搬。。。。。</div>
        </li>
    </ul>
</body>
<script src="angular.js"></script>
<script>
   var app = angular.module("app",[]);
    app.controller("myCtrl",function($scope){
        $scope.showDiv = false;
        $scope.show = function(){
            $scope.showDiv = !$scope.showDiv;
        };
    });
</script>
</html>

 

posted @ 2017-06-12 22:08  缒亿  阅读(312)  评论(0)  编辑  收藏  举报