有没有比这更好的方法来创建仅使用JavaScript的切换功能（根本没有JQuery）？

Question

我有一个带有几个li元素的ul形式的导航栏，最后一个li（名为“ more”）具有另一个ul形式的自己的子菜单。 我正在尝试（并且成功完成了）使子菜单的原始状态为visible：visible;。 然后，当用户单击名称“更多”时，它将在可见性之间切换：可见； 和可见性：隐藏； 我使用JavaScript和带有if语句的计数器。 我使用计数器的原因是因为我尝试过：

if(document.querySelector('#subMenu').style.visibility == "hidden")...;

但这不会切换。

我的问题是：

1. 在专业的前端开发人员工作场所中，这种创建切换功能的方法是否被认为可以接受？

2. 是否有更好的方法可以在仅使用JavaScript单击元素时在可见和隐藏之间切换（试图更好地使用JavaScript）？

代码如下（我只包含了相关代码）：

的HTML

<ol id = "leftNav" class = "bothNavs">
    <li class = "navs" id = "more">More<div class = "arrow"></div>
        <ul class = "subMenu">
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </li>
</ol>

的CSS

.subMenu {
    width: 160%;
    padding: 5px 0px;
    padding-left: 7px;
    margin-left: 6px;
    position:  absolute;
    top: 100%;
    left:0px;
    visibility: hidden;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
    background: #2D2D2D;
    list-style: outside none none;
    z-index: 1001;
}

的JavaScript

var more = document.querySelector('#more');
var subMenu = document.querySelector('.subMenu');
var counter =0;

more.addEventListener("click", toggle);

function toggle () {
    if(counter === 0){
        subMenu.style.visibility = "visible";
        counter += 1;
    } else {
        subMenu.style.visibility = "hidden";
        counter -= 1;
    }
};

预先感谢您的回答。

Answer 1

我觉得切换可见性（或任何样式）的更好方法是切换类。

在CSS中考虑以下内容：

.subMenu.is-visible {
    visibility: visible;
}

然后您的函数只需要看起来像这样：

var menu = document.querySelector('.subMenu');
document.getElementById('more').addEventListener('click', function () {
    menu.classList.toggle('is-visible');
}, false);

Answer 2

对于切换，您应该使用布尔值而不是int：

 var more = document.querySelector('#more'); var subMenu = document.querySelector('.subMenu'); var clicked = false; more.addEventListener("click", function(evt) { // This is called a ternary operator, it's basically // a really simple if/else statement subMenu.style.visibility = (clicked) ? "visible " : "hidden"; // This will set clicked to the opposite (not) value of what // it currently is. Being that we're using a boolean // it will toggle true/false clicked = !clicked; }); 

您还应该阅读（并投赞成票） -visible：hidden和display：none有什么区别？

Answer 3

您不应该在<li>元素中嵌入<ul> 。 造成这种情况的原因有很多种，但大多数情况下，它会扰乱层次结构并使HTML的意义降低。

同样，上一次我不得不解决这个问题时，它最终看起来像这样：

var subMenu = document.querySelector('.subMenu');
if (clicked) {
    subMenu.style.visibility = "visible";
} else {
    subMenu.style.visibility = "hidden";
}

如果您有其他子菜单受到干扰，请考虑将其设置为id而不是class。

Answer 4

如果您确实不需要计数器，请使用布尔值：

 var more = document.querySelector('#more'); var subMenu = document.querySelector('.subMenu'); more.addEventListener("click", toggle); function toggle () { subMenu.style.visibility = subMenu.style.visibility != "hidden" ? "hidden" : "visible"; }; 

 .subMenu { width: 60%; background: #2D2D2D; list-style: outside none none; color: white } 

 <ol id = "leftNav" class = "bothNavs"> <li class = "navs" id = "more">More<div class = "arrow"></div> <ul class = "subMenu" style="visibility: hidden"> <li>One</li> <li>Two</li> <li>Three</li> </ul> </li> </ol> 

理想情况下，如James在他的回答中所建议的那样，您将修改此代码以切换类而不是内联CSS样式。