Question

我正在尝试使用div而不是uls创建一个可点击的下拉菜单。我有一切风格正确，但我写的功能不会切换可见性。有什么想法吗？

HTML

        <a href="#" name="menu" onclick="toggleMenu('menu-1.sub');"><div class="menu-item" id="menu-1"><a aria-haspopup="true" href="#">GET SUPPORT</a>
            <div class="sub-menu" id="menu-1.sub"></div>
        </div></a>



</div>

CSS

 div#mobile_menu_drop-down_test {display:block; position:absolute; top:35px; 
 left:20px; width:40px; height:40px; box-shadow:2px 2px 2px #000; 
background-color:#fff;  background-image:url(Images/hamburger.png); 
background-size:30px 20px; background-repeat:no-repeat; background-
position:center; cursor:pointer;
}

div#mobile_menu_wrapper {
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:auto;
background-color:#ffcb05;
color:#00274c;
box-shadow:2px 2px 5px #000;
font-weight:bold;
font-size:14px;
}

div.menu-item {
display:block; width:100%; border-bottom:1px dashed #5d5d5d; 
padding:15px 0px; text-indent:30px; transition:.2s ease;
}


div.sub-menu {display:none; text-indent:65px; padding:12px 0px; color:#fff;}


}

的Javascript

function toggleMenu (id) {
var men = document.getElementById(id);
if (men.style.display =='none')
    men.style.display = 'block';
else
    men.style.display ='none';
}

Answer 1

在您的css中，您没有定义ID为“menu-1.sub”的元素的规则。

您有＃mobile_menu_drop-down_test和#mobile_menu_wrapper的定义。

在你的css文件中，你需要定义＃menu-1.sub并将它的初始显示属性设置为等于'none'。

然后该函数最终可以将men.style.display ==='none'评估为真，然后继续将men.style.display属性设置为值'block'。

Answer 2

您正在CSS中添加display: none;。 element.style.display检查元素的内联样式。将您的javascript更改为：

var men = document.getElementById(id);
var display = men.currentStyle ? men.currentStyle.display :
                          getComputedStyle(men, null).display;
if (display == 'none' || men.style.display == 'none')
    men.style.display = 'block';
else
    men.style.display = 'none';
}

IE使用.currentStyle，但其他浏览器不使用（因此是三元运算符）。其他浏览器使用getComputedStyle()，因此我们根据浏览器使用正确的版本。

将显示更改为＆＃39;阻止＆＃39;从没有＆＃39; onclick无法正常工作

2 个答案: