有没有比这更好的方法只用JavaScript创建一个切换函数(根本没有JQuery）

Is there a better way than this to create a toggle function just with JavaScript (no JQuery at all)?

本文关键字：一个 函数 JQuery 更好 方法 创建 JavaScript 有没有      更新时间：2023-09-26

我有一个 ul 形式的导航栏，其中包含多个 li 元素，最后一个 li（名为"more"）以另一个 ul 的形式有自己的子菜单。 我正在尝试（并成功）使子菜单的原始状态为可见性：可见;然后当用户单击李名称"更多"时，它将在可见性之间切换：可见;和可见性：隐藏;我使用了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;
    }
};

提前感谢您的回答。

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

在你的 CSS 中考虑这样的事情：

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

那么你的函数只需要看起来像这样：

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

对于切换，您应该使用布尔值而不是 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;
});

您还应该阅读（并投票支持）此内容 - 可见性：隐藏和显示：无之间有什么区别？

不应在

<li> 元素中嵌入<ul>。有各种各样的原因，但主要是它扰乱了层次结构并使HTML的意义降低。

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

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

考虑将其设为 id 而不是类，以防您有其他干扰的子菜单。

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

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>

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

相关文章：