切换功能需要两次点击

时间：2015-09-22 09:14:16

标签： 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>

1 个答案:

答案 0 :(得分：0)

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

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';
              }
    });

}
相关问题
最新问题