javascript - 切换功能需要单击两次

标签 javascript html css

我正在实现一个将出现在滚动上的菜单。它有两个<li>元素和切换功能。除了需要点击两次才能激活触摸设备上的切换之外，它工作得很好。我尝试添加 return false;或e.preventDefault();但它并没有解决它。有人可以帮忙吗？这是我的 JS 代码:

  function toggle_visibility(id) {
    var e = document.getElementById(id);   
    var allDivs = document.querySelectorAll('div[id^=mega]');
    
    [].forEach.call(allDivs, function(div) { 
        
        if (div != e){
            div.style.display = 'none';              
        }
        else {
            e.style.display = e.style.display == 'none' ? 'block' : 'none';
        }
    });    
}
.menubar {
  position: fixed;
  top: 0px;
  height: 51px;
  width: 295px;
  z-index: 69;
  background-color: #FFF;
  margin-top: -100px;
  -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.2);
  box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}
a.sub-categories-sticky-menu {
    color: #323470 !important;
    font-size: 14px !important;
}

ul.show-all-mattresses-sticky-menu {
    width: 7% !important;
    margin-right: 0px !important;
    margin-left: -8% !important;
}


#wrapper {
  width: 294px;
  min-height: 600px;
  margin: 0 auto;
}

nav {
  position: relative;
  width: 294px;
  height: 51px;
  margin: 0 auto;
  background: #323470;
}

nav { 
  display: block;
}

nav ul#menu {
  display: block;
  margin: 0;
  padding: 0;
  list-style: 0;
} 

nav ul#menu li {
  position: relative;
  display: inline-block;
}

nav ul#menu li a {
    display: block;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
    color: #fff;
    text-decoration: none;
    padding: 0px 22px;
}

nav ul#menu li a:hover, nav ul#menu li:hover > a {
  background: #323470;
}

nav ul#menu li:hover > #mega {
  display: block;
}
nav ul#menu li:hover > #mega2 {
  display: block;
}

#mega {
  position: absolute;
  top: 100%;
  left: 0;
  width: 920px;
  height: auto;
  padding: 5px 0px 0px 20px;
  background: #dad7d6;
  display: none;
}
#mega2 {
  position: absolute;
  top: 100%;
  left: 0;
  width: 920px;
  height: auto;
  padding: 5px 0px 0px 20px;
  background: #dad7d6;
  display: none;
}

ul#menu ul {
  float: left;
  width: 23%;
  margin: 0 2% 15px 0;
  padding: 0;
  list-style: none;
}

ul#menu ul li {
  display: block;
}

ul#menu ul li a {
  float: left;
  display: block;
  width: 100%;
  height: auto;
  line-height: 1.3em;
  color: #828180;
  text-decoration: none;
  padding: 6px 0;
}

/*ul#menu ul li:first-child a {
  font-size: 1.2em;
  color: #828180;
}*/
ul#menu ul li:first-child a {
    font-size: 16px;
    color: #4a4949;
    font-weight: bold;
    font: 16px/1.2 'FuturaBT-Book', Arial, Helvetica, sans-serif;
    /* border-bottom: 1px #4a4949 solid; */
}

ul#menu ul li a:hover {
  color: #828180;
  background: none;
}

ul#menu ul li:first-child a:hover {
  color: #828180;
}

/* clearfix */
nav ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

nav ul {
  display: inline-block;
} 

html[xmlns] nav ul {
  display: block;
}
 
* html nav ul {
  height: 1%;
}

#content {
  padding: 30px 0;
}
<div class="menubar" data-scroll="true" style="margin-top: -151px;"><!-- begin wrapper -->
<div id="wrapper2"><!-- begin nav -->
<nav>
<ul id="menu">
	<li><a href="javascript:void(0);" onclick="toggle_visibility('mega'); " style="background-color: #25BEBE;">Item 1</a>
	<div id="mega">
	<ul>
		<li><a href="javascript:void(0);">Type</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">1</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">2</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">3</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">4</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">5</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">6</a></li>
	</ul>

	<ul>
		<li><a href="javascript:void(0);">Type</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">1</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">2</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">3</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">4</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">5</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">6</a></li>
	</ul>

	<ul>
		<li><a href="javascript:void(0);">Type</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">1</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">2</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">3</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">4</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">5</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">6</a></li>
	</ul>

	<ul>
		<li><a href="#">Show all</a></li>
	</ul>
	</div>
	</li>
	<li><a href="javascript:void(0);" onclick="toggle_visibility('mega2');">Item 2</a>
	<div id="mega2">
	<ul>
		<li><a href="javascript:void(0);">Type</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">1</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">2</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">3</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">4</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">5</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">6</a></li>
	</ul>

	<ul>
		<li><a href="javascript:void(0);">Type</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">1</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">2</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">3</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">4</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">5</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">6</a></li>
	</ul>

	<ul>
		<li><a href="javascript:void(0);">Type</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">1</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">2</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">3</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">4</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">5</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">6</a></li>
	</ul>

	<ul>
		<li><a href="javascript:void(0);">Type</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">1</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">2</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">3</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">4</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">5</a></li>
		<li><a class="sub-categories-sticky-menu" href="#">6</a></li>
	</ul>

	<ul class="show-all-sticky-menu">
		<li><a href="#">Show all</a></li>
	</ul>
	</div>
	</li>
</ul>
</nav>
<!-- /nav --></div>
<!-- /wrapper --></div>

最佳答案

样式属性未在页面加载时设置，因此它返回为空字符串。请尝试以下操作:

function toggle_visibility(id) {
    var e = document.getElementById(id);   
    var allDivs = document.querySelectorAll('div[id^=mega]');

    [].forEach.call(allDivs, function(div) { 

        if (div != e)
        {
            div.style.display = 'none';

        } else {
            e.style.display = (e.style.display == 'none' || e.style.display === '') ? 'block' : 'none';
              }
    });

}

关于javascript - 切换功能需要单击两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32713002/

上一篇：javascript - 旋转后移动 Canvas 图像对象

下一篇：javascript - 在ajax调用的php页面中获取发布数据

相关文章：

php - 在另一个 mysql 查询 while 循环中调用 mysql 查询

html - Ruby on Rails ajax 弹出消息

html - SVG 在 HTML 中不使用字体

html - css:带背景的标签样式边框

html - 如何将文本环绕在右下角的 div 周围？

javascript - 如何将此 Greasemonkey 代码转换为适用于 Android 的 JavaScript？

javascript - 无法使用添加商品将商品添加到购物车

javascript - Array.splice 适用于两个状态子数组

javascript - Fabricjs。具有圆 Angular 和描边的图像

html - 背景图像缺失 window.print

©2024 IT工具网  联系我们