Javascript 和 jquery 脚本只更改一次类

Question

我正在为学校家庭作业创建一个网页，我正在将下拉菜单放入导航中，以显示它我使用 javascript 和 jquery 但它只工作一次，我可以打开下拉菜单但我无法关闭它。

我已经尝试了很多方法来做到这一点，比如只使用 javascript，或者使用切换类，但它没有用

<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 href="#">Action</li>
   <li href="#">Another action</li>
   <li href="#" class="logout">Logout</li>
  </ul>
</nav>

var x = 0;
if (x == 0){
$("#yname").click(function(){
$("#dropdowncontent").removeClass("dropdown-content");
$("#dropdowncontent").addClass("dropdown-content-show");
var x = 1;
});
}

else {
$("#yname").click(function(){
$("#dropdowncontent").removeClass("dropdown-content-show");
$("#dropdowncontent").addClass("dropdown-content");
var x = 0;
});
}

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

.dropdown-content {
    display: none;
}

我希望显示下拉菜单并隐藏下拉菜单，但它只显示

Answer 1

您只能分配第一个点击处理程序。考虑这两行代码的逻辑:

var x = 0;
if (x == 0){

变量 x 在那种情况下总是等于0。因为它在检查之前被显式设置为 0。

将条件逻辑放在点击处理程序中，而不是有条件地创建处理程序。像这样:

var x = 0;

$("#yname").click(function(){
    if (x == 0) {
        $("#dropdowncontent").removeClass("dropdown-content");
        $("#dropdowncontent").addClass("dropdown-content-show");
        x = 1;
    } else {
        $("#dropdowncontent").removeClass("dropdown-content-show");
        $("#dropdowncontent").addClass("dropdown-content");
        x = 0;
    }
});

(另请注意，在重新分配变量时删除了 var。那是在该范围内创建一个新变量，这不是您想要的。)

虽然从逻辑上讲，您应该能够将其简化为:

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