Question

在我的应用程序中，我有一个左侧导航菜单。菜单基本上是<div>，看起来像这样 -

<div id ="pdAppSidenav" style="display:none">
Blah blah blah
</div>

如您所见，默认情况下不显示此菜单。我的网页有一个图标，我希望单击此图标应打开左侧导航菜单，然后重新单击相同的图标应关闭菜单。我也希望当菜单打开时，点击屏幕上的任何地方都应关闭它。

请注意，该图标表示为<div>，如下所示 -

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

为此，我写了以下代码 -

function leftnav() {
  var collapse_sidebar = document.getElementById('pdAppSidenav');
  var  collapse_sidebar_icon = document.getElementById("hamburgerIconId");
    var isOpen="false"
        collapse_sidebar_icon.onclick = function() { 
            if(isOpen==="false"){
                collapse_sidebar.style.display = "block";
            collapse_sidebar.style.width = "250px";
                isOpen="true";
                console.log("1");
            }
            else{
                collapse_sidebar.style.display = "none";
            collapse_sidebar.style.width = "0px";
                isOpen  = "false";
                console.log("2");
            }

    }
        window.onclick = function() {
        if (isOpen==="true") {          
            collapse_sidebar.style.display = "none";
            collapse_sidebar.style.width = "0px";
            isOpen="false";
            console.log("3");
        }
        }

现在，当我点击图标时，它会触发与图标和窗口关联的onclick功能，这意味着在控制台中打印了1和3。我如何实现我想要的结果？

Answer 1

您可以使用 jquery 来实现它，如下面的代码所示，用于演示目的我使用的是按钮而不是图标。

<强>的Javascript

    var isImageDiv=false;
    $(document).ready(function () {
        $("#hamburgerIconId").click(function () {
        if(isImageDiv)
            leftnav();
        });
    });

    function leftnav() {
        $("#pdAppSidenav").toggle(); 
    }



   $(document).mouseup(function(e) 
   {
         isImageDiv=false;
       var container = $("#pdAppSidenav");
             var imageDiv=$('#hamburgerIconId');
       if (container.is(e.target)) 
       {
           container.hide();
       }
       else if(imageDiv.is(e.target))
       {
                isImageDiv=true;
       }
       else
       {
            container.hide();
       }
   });

<强> HTML

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

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

<div id ="pdAppSidenav" style="display:none;width:250px">
Blah blah blah
</div>

Working Example

单击div图标时，它将切换div，反之亦然。此外，当您在div外部单击时，它将隐藏div。

当我点击屏幕上的任意位置时，使用Javascript关闭左导航

1 个答案: