JQuery导航下拉菜单仅生效一次问题求助

咱们先揪出问题根源：你当前的JavaScript逻辑有个关键漏洞——页面加载时x初始值是0，所以只会执行if分支里的代码，给#yname绑定打开下拉菜单的点击事件。之后你在事件里把x设为1，但这个x是函数内部的局部变量，根本不会影响外面的全局x，而且else分支的代码在页面加载时就已经跳过了，永远不会绑定关闭菜单的事件，自然点击一次后就没法关闭了！

最简单的解决方案：用toggleClass直接切换状态 #

你之前试过toggleClass没成功？大概率是用法不对，咱们来写个靠谱的版本：

1. 保留你的CSS（或简化） #

你的原有CSS可以继续用：

.dropdown-content { display: none; }
.dropdown-content-show { display: block; }

或者更简洁，只维护一个控制显示的类（推荐）：

#dropdowncontent { display: none; }
#dropdowncontent.show { display: block; }

2. 简化JavaScript代码 #

直接给#yname绑定一个点击事件，用toggleClass一键切换状态：

方案一（适配你原来的两个类）：

$("#yname").click(function(){
  $("#dropdowncontent").toggleClass("dropdown-content dropdown-content-show");
});

方案二（简化后的单类控制）：

$("#yname").click(function(){
  $("#dropdowncontent").toggleClass("show");
});

3. 优化HTML语义化（可选但推荐） #

注意<li>标签本身不支持href属性，应该用<a>包裹内容，这样既符合HTML语义，也能正常触发跳转：

<nav id="logged">
  <a href="#" id="yname" name="yname"> Your Name <i class="fa fa-caret-down"></i></a>
  <ul id="dropdowncontent" class="dropdown-content">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#" class="logout">Logout</a></li>
  </ul>
</nav>

如果你想用纯JavaScript实现 #

也可以不用jQuery，直接用原生JS的classList.toggle：

const userNameBtn = document.getElementById('yname');
const dropdownMenu = document.getElementById('dropdowncontent');

userNameBtn.addEventListener('click', function() {
  dropdownMenu.classList.toggle('dropdown-content-show');
  dropdownMenu.classList.toggle('dropdown-content');
});

这样点击按钮时，菜单会在显示/隐藏状态之间自由切换，完全符合你的预期~

内容的提问来源于stack exchange，提问作者Ismael Ben Massoud Alfaro