Javascript 移动汉堡菜单无法关闭
我正在尝试使用div标签“mobile links”为我的移动网站创建一个下拉菜单(汉堡包) 我已经把它全部写出来了(Javascript 移动汉堡菜单无法关闭,javascript,html,css,mobile,responsive-design,Javascript,Html,Css,Mobile,Responsive Design,我正在尝试使用div标签“mobile links”为我的移动网站创建一个下拉菜单(汉堡包) 我已经把它全部写出来了(HTML、CSS和JavaScript),它工作正常,只是当菜单打开时,我无法通过再次单击汉堡来关闭菜单 访问者必须点击一个链接退出下拉菜单,我不希望他们这样做 我想通过再次点击汉堡来关闭菜单 我可以在我的JavaScript代码中看到它正在删除“show”,我认为这会关闭菜单 这是我的HTML/PHP和JavaScript代码: 此代码存在于我的“header.phtml”文件
HTML
、CSS
和JavaScript
),它工作正常,只是当菜单打开时,我无法通过再次单击汉堡来关闭菜单
访问者必须点击一个链接退出下拉菜单,我不希望他们这样做
我想通过再次点击汉堡来关闭菜单
我可以在我的JavaScript
代码中看到它正在删除“show”,我认为这会关闭菜单
这是我的HTML
/PHP
和JavaScript
代码:
此代码存在于我的“header.phtml”文件中
<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>
任何帮助都将不胜感激。谢谢 欢迎来到StackOverflow,您的问题应该包含一个最小、完整且可验证的示例。请删除PHP,只提供实际生成的标记,谢谢。
.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; }