时间戳

首页 > 解决方案 > Javascript 和 jquery 脚本只更改一次类

javascript - Javascript 和 jquery 脚本只更改一次类

问题描述

我正在为学校家庭作业创建一个网页，并且正在将下拉菜单放入导航中，以显示它我使用 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;
}

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

标签： javascriptjqueryhtmlcss

解决方案

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

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

在那种情况下，变量x总是相等的。因为它在检查它之前被明确设置为。00

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

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");
});

推荐阅读