Question

在我的应用程序中，我有一个用 -

表示的按钮

<div id="hamburgerIconId" class="hamburgerIcon"></div>

当我点击此按钮时，它会打开一个最初不可见的侧面导航框。单击同一按钮可关闭侧面导航框。侧面导航的HTML看起来像这样 -

<div id="pdAppSidenav" class="sidenav show-xs hidden-lg">
   <a href="#">Life Insurance</a>
   <section id="cd-timeline" class="cd-container">
      BLAH BLAH BLAH
   </section>
   <!-- cd-timeline -->
   <div class="pd-content-bottom">
      <h3>HELP DESK </h3>
      <p>Open 7am-5pm </p>
   </div>
</div>

另外，我已经设置了一个遮罩层，当打开侧面导航框时它会变得可见。该层夹在侧面导航框和网页之间。它主要用于在sidenav打开时变暗和禁用背景。单击屏幕上的任何位置也应关闭sidenav

遮蔽层 -

<div id="left-nav-mask">
</div>

以下是我的Javascript / Jquery代码 -

function leftnav() {
    var collapse_sidebar_modal = document.getElementById('pdAppSidenav');
    var collapse_sidebar_icon = document.getElementById("hamburgerIconId");
    var left_nav_mask = document.getElementById("left-nav-mask");
    var isOpen = false;
    collapse_sidebar_icon.onclick = function() {
        if (isOpen == false) {
            console.log(event.target);
            collapse_sidebar_modal.style.display = "block";
            collapse_sidebar_modal.style.width = "250px";
            left_nav_mask.style.display = "block";
            isOpen = true;
        } else {
            console.log(event.target);
            collapse_sidebar_modal.style.display = "none";
            collapse_sidebar_modal.style.width = "0px";
            isOpen = false;
        }
    }


    $(window).bind("click touchstart", function(event) {
            if (event.target == left_nav_mask && isOpen == true) {
                console.log(event.target);
                left_nav_mask.style.display = "none";
                collapse_sidebar_modal.style.display = "none";
                collapse_sidebar_modal.style.width = "0px";
                isOpen = false; 
            }

        });

}

当我点击按钮时，它会打开sidenav，再次单击它会关闭sidenav。此外，当sidenav打开时，单击sidenav外部的任何位置都会关闭它。

现在，当我使用Chrome开发工具中提供的移动模拟器时，在sidenav打开时单击按钮不会关闭它。发生的事情是window.onclick会触发，然后立即触发按钮的onclick功能。

有谁知道这个问题的解决方案？

当window.onclick（）触发时，禁用按钮的onclick（）

0 个答案: