如何通过单击div JavaScript / Jquery外部来关闭菜单

时间：2018-02-14 21:35:02

标签： javascript jquery

我实际上是在点击外面时搜索如何关闭div，但我不知道该怎么做。 我尝试过很多东西，比如使用带有布尔值的属性.removeClass，添加一个removeEventListener，甚至是崩溃，但是我并不理解那个，但是没有对我有用......我真的被困了。 这是我的代码：

＆＃13;
＆＃13; 
(function() {
            var hamburger = {
                navToggle: document.querySelector('.nav-toggle'),
                nav: document.querySelector('nav'),

                doToggle: function (e) {
                    e.preventDefault();
                    this.navToggle.classList.toggle('expanded');
                    this.nav.classList.toggle('expanded');
                }
            };

            hamburger.navToggle.addEventListener('click', function (e) {
                hamburger.doToggle(e);
            });
            hamburger.nav.addEventListener('click', function (e) {
                hamburger.doToggle(e);
            });

    }());
＆＃13; 
.nav2 {
    -webkit-transition: left 0.5s ease;
    -moz-transition: left 0.5s ease;
    -ms-transition: left 0.5s ease;
    -o-transition: left 0.5s ease;
    transition: left 0.5s ease;
    background: #000000;
    color: #ff4c4d;
    cursor: pointer;
    font-size: 2rem;
    height: 100vh;
    left: -20rem;
    padding: 6rem 2rem 2rem 2rem;
    position: fixed;
    top: 0;
    width: 49vw;
    z-index: 1;
    opacity: 0.90;
    z-index: 2;
}

.nav2.expanded { left: 0; }

.nav2 ul {
    position: absolute;
    top: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-toggle {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
    position: fixed;
    top: 2rem;
    width: 10vw;
    z-index: 3;

}

.nav-toggle:hover { opacity: 0.8; }

.nav-toggle .nav-toggle-bar,  .nav-toggle .nav-toggle-bar::after,  .nav-toggle .nav-toggle-bar::before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: #5080ff;
    content: '';
    height: 0.7vh;
    width: 100%;
    z-index: 4;
}

.nav-toggle .nav-toggle-bar { margin-top: 0; border-radius: 4px;}

.nav-toggle .nav-toggle-bar::after { margin-top: 1.5vh; border-radius: 4px;}

.nav-toggle .nav-toggle-bar::before { margin-top: -1.5vh; border-radius: 4px;}

.nav-toggle.expanded .nav-toggle-bar { background: transparent; }

.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
    background: #85faff;
    margin-top: 0;
}

.nav-toggle.expanded .nav-toggle-bar::after {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nav-toggle.expanded .nav-toggle-bar::before {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="nav-toggle">
    <div class="nav-toggle-bar"></div>
</div>
<nav class="nav2">
    <ul class="link2">
        <img src="./assets/img/bosewhite.png" class="bose-white">
        <br>
        <li><a class="link" href="#">Home</a></li><br>
        <li><a class="link" href="#">Portfolio</a></li><br>
        <li><a class="link" href="#">About</a></li><br>
        <li><a class="link" href="#">Contact</a></li><br>
    </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

您可以使用绑定到正文上的click事件，然后检查事件路径是否包含导航菜单：

＆＃13;
＆＃13; 
(function() {
            var hamburger = {
                navToggle: document.querySelector('.nav-toggle'),
                nav: document.querySelector('nav'),

                open: function (e) {
                    e.preventDefault();
                    this.navToggle.classList.add('expanded');
                    this.nav.classList.add('expanded');
                },
                close: function (e) {
                    e.preventDefault();
                    this.navToggle.classList.remove('expanded');
                    this.nav.classList.remove('expanded');
                }
            };

            hamburger.navToggle.addEventListener('click', function (e) {
                if (hamburger.nav.classList.contains('expanded')) {
                  hamburger.close(e);
                } else {
                  hamburger.open(e);
                }
            });
            
            hamburger.nav.addEventListener('click', function (e) {
                hamburger.open(e);
            });
            
                        
           document.addEventListener('click', function (e) {
                if (e.path.indexOf(hamburger.navToggle) < 0 && e.path.indexOf(hamburger.nav) < 0) {
                  hamburger.close(e);
                }
            });

    }());
＆＃13; 
.nav2 {
    -webkit-transition: left 0.5s ease;
    -moz-transition: left 0.5s ease;
    -ms-transition: left 0.5s ease;
    -o-transition: left 0.5s ease;
    transition: left 0.5s ease;
    background: #000000;
    color: #ff4c4d;
    cursor: pointer;
    font-size: 2rem;
    height: 100vh;
    left: -20rem;
    padding: 6rem 2rem 2rem 2rem;
    position: fixed;
    top: 0;
    width: 49vw;
    z-index: 1;
    opacity: 0.90;
    z-index: 2;
}

.nav2.expanded { left: 0; }

.nav2 ul {
    position: absolute;
    top: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-toggle {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
    position: fixed;
    top: 2rem;
    width: 10vw;
    z-index: 3;

}

.nav-toggle:hover { opacity: 0.8; }

.nav-toggle .nav-toggle-bar,  .nav-toggle .nav-toggle-bar::after,  .nav-toggle .nav-toggle-bar::before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: #5080ff;
    content: '';
    height: 0.7vh;
    width: 100%;
    z-index: 4;
}

.nav-toggle .nav-toggle-bar { margin-top: 0; border-radius: 4px;}

.nav-toggle .nav-toggle-bar::after { margin-top: 1.5vh; border-radius: 4px;}

.nav-toggle .nav-toggle-bar::before { margin-top: -1.5vh; border-radius: 4px;}

.nav-toggle.expanded .nav-toggle-bar { background: transparent; }

.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
    background: #85faff;
    margin-top: 0;
}

.nav-toggle.expanded .nav-toggle-bar::after {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nav-toggle.expanded .nav-toggle-bar::before {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="nav-toggle">
    <div class="nav-toggle-bar"></div>
</div>
<nav class="nav2">
    <ul class="link2">
        <img src="./assets/img/bosewhite.png" class="bose-white">
        <br>
        <li><a class="link" href="#">Home</a></li><br>
        <li><a class="link" href="#">Portfolio</a></li><br>
        <li><a class="link" href="#">About</a></li><br>
        <li><a class="link" href="#">Contact</a></li><br>
    </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题