移动汉堡菜单不会关闭

Question

我正在尝试使用div标签＆＃34; mobile-links＆＃34;为我的移动网站创建一个下拉菜单（汉堡包）。

我已将所有内容写出来（HTML，CSS和JavaScript）并且工作正常，但我无法通过再次单击汉堡包来关闭菜单菜单已打开。

访客必须点击链接退出下拉菜单，我不希望他们这样做。

我希望再次单击汉堡包关闭菜单。

我可以在我的JavaScript代码中看到它正在删除＆＃34; show＆＃34;，我认为这会关闭菜单。

以下是我的HTML / PHP和JavaScript代码：

此代码位于我的＆＃34; header.phtml＆＃34;文件

<div class="spanbar">
    <div class="header-bar container">
        <div class="mobile-links">          
            <div class="dropdown">
                <onclick="myFunction()" class="dropbtn">
                    <span>
                        <img src="http://www.smockedoverstocks.net/skin/frontend/lee/default/images/hamburger-menu.png"/>
                    </span>
                </button>
                <div class="dropdown-content">
                    <div class="quick-access five columns omega">
                        <?php echo $this->getChildHtml('topLinks') ?>
                    </div>
                </div>
            </div>
        </div>

        <span>FREE SHIPPING ON ALL ORDERS<span>

        <div class="desktop-links">
            <div class="quick-access five columns omega">
                <?php echo $this->getChildHtml('topLinks') ?>
            </div>
        </div>
    </div>
</div>

<div class="header-container">
    <header class="container main-header">
        <?php if ($this->getIsHomePage()):?>
            <h3 class="logo seven columns alpha">
                <a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo">
                    <img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" />
                </a>
            </h3>
        <?php else:?>
            <h3 class="logo seven columns alpha">
                <a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo">
                    <img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" />
                </a>
            </h3>
        <?php endif?>       
        <div class="desktop-links">
            <div class="quick-access five columns omega">
                <?php echo $this->getChildHtml('store_language') ?>
                <?php echo $this->getChildHtml('topSearch') ?>
            </div>
        </div>

        <!-- <div class="mobile-links">
            <div class="dropdown">
                <button onclick="myFunction()" class="dropbtn">
                    <span>Menu</span>
                </button>
                <div class="dropdown-content">
                    <div class="quick-access five columns omega">
                        <?php echo $this->getChildHtml('topLinks') ?>
                        <?php echo $this->getChildHtml('store_language') ?>
                        <?php echo $this->getChildHtml('topSearch') ?>
                    </div>
                </div>
            </div>
        </div> -->

        <!-- <h3 class="welcome-msg">
            <?php echo $this->getChildHtml('welcome') ?>
            <?php echo $this->getAdditionalHtml() ?>
        </h3> -->

        <?php echo $this->getChildHtml('topContainer'); ?>
    </header>

    <div class="nav-bar-boarder"></div>

</div>

<?php echo $this->getChildHtml('topMenu') ?>
<?php echo $this->getChildHtml('topScripts') ?>

<script language="javascript">
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }
    // Close the dropdown menu if the user clicks outside of it
    window.onclick = function(event) {
        if (!event.target.matches('.dropbtn')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }
</script>

我的CSS：

.mobile-links .dropdown {
    position:relative;
    display:inline-block;
    padding:2px 13px 0px;
}

.mobile-links .dropdown-content{
    display:none;
    position:absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 5px 12px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display:block;
}

.show { display:block; }

任何帮助将不胜感激。谢谢！