Javascript 单击另一个div时折叠div的简单jQuery函数是'；行不通

我不是在寻找手风琴功能，而是在单击单个元素时切换多个状态的能力。我认为这将是非常简单的，它是。代码根本不起作用。有人能看一下代码并提出一些我可以尝试的建议吗

$(document).ready(function(){
    $("#nav_header").click(function(){
        if (desktopNavigation === 0) {
            $("#navigation").css("overflow","hidden");
            $("#navigation").css("height","0px");
            desktopNavigation = 1;
        }
        else if (desktopNavigation === 1) {
            $("#navigation").css("overflow","visible");
            $("#navigation").css("height","auto");
            desktopNavigation = 0;
        }
        else {
        }
    });
});

变量的初始值如下所示：

var desktopNavigation = 0;

<div id="nav_header" class="trigger">
  <ul>
    <li>NAV MENU #1 Title</li>
    <li>NAV MENU #2 title</li>
    <li>NAV MENU #3 title</li>
    <li>NAV MENU #4 title</li>
    <li>NAV MENU #5 title</li>
  </ul>
</div><!--close nav_header-->
<div id="navigation" class="target" style="height:0;overflow:hidden;">
  <div id="nav_column">
    NAV MENU #1
  </div><!--close nav_column-->
  <div id="nav_column">
    NAV MENU #2
  </div><!--close nav_column-->
  <div id="nav_column">
    NAV MENU #3
  </div><!--close nav_column-->
  <div id="nav_column">
    NAV MENU #4
  </div><!--close nav_column-->
  <div id="nav_column">
    NAV MENU #5
  </div><!--close nav_column-->
</div><!--close navigation-->

我试图实现的HTML位于加载了jQuery的页面中，如下所示：

var desktopNavigation = 0;

<div id="nav_header" class="trigger">
  <ul>
    <li>NAV MENU #1 Title</li>
    <li>NAV MENU #2 title</li>
    <li>NAV MENU #3 title</li>
    <li>NAV MENU #4 title</li>
    <li>NAV MENU #5 title</li>
  </ul>
</div><!--close nav_header-->
<div id="navigation" class="target" style="height:0;overflow:hidden;">
  <div id="nav_column">
    NAV MENU #1
  </div><!--close nav_column-->
  <div id="nav_column">
    NAV MENU #2
  </div><!--close nav_column-->
  <div id="nav_column">
    NAV MENU #3
  </div><!--close nav_column-->
  <div id="nav_column">
    NAV MENU #4
  </div><!--close nav_column-->
  <div id="nav_column">
    NAV MENU #5
  </div><!--close nav_column-->
</div><!--close navigation-->

导航菜单#1标题
导航菜单#2标题
导航菜单#3标题
导航菜单#4标题
导航菜单#5标题

导航菜单#1
导航菜单#2
导航菜单#3
导航菜单#4
导航菜单#5

---

我在wordpress页面上执行此代码，并且它在本地环境中工作得很好，这可能也是相关的。

从您提供的代码中，不清楚var

desktopNavigation

最初是什么，因此它永远不会是

==0

或

1

$(document).ready(function(){

  var desktopNavigation = desktopNavigation || 0;

  $("#nav_header").click(function(){

    if (desktopNavigation === 0) {
        $("#navigation").css("overflow","hidden");
        $("#navigation").css("height","0px");
        desktopNavigation = 1;
    }
    else if (desktopNavigation === 1) {
            $("#navigation").css("overflow","visible");
        $("#navigation").css("height","auto");
        desktopNavigation = 0;
    }
    else {

    }
  });
});

或者写：

...
if (desktopNavigation === 0 || !desktopNavigation) {
...

---

在单击功能上方，添加：

var desktopNavigation = 0;

---

desktopNavigation

可能未定义

但是如果您的目标是隐藏

div

，我可以建议您使用内置的jQuery函数

.toggle（）

或者，如果要切换多个更广泛的样式，请使用

.toggleClass（）

添加或删除自定义类

$("#navigation").toggleClass('hidden');

---

你的问题缺乏背景。“代码根本不起作用”是什么意思？“桌面导航”在哪里定义？“切换多个状态”到底意味着什么

脱离假设，人们无法给出直接、简洁的答案。话虽如此，下面是一个例子，希望能回答您的问题：

JSFiddle：

HTML:

CSS:

“本地环境”是指在本地机器上设置了wordpress环境吗？如果更改适用于本地而不是远程，我会尝试：

• 清除浏览器缓存和刷新远程环境

• 使用chrome“inspect element”检查#导航元素，并确保它不包含任何可能隐藏#导航的额外css

• 单击#导航单元标题时打印到控制台；这是为了确保单击回调按预期工作

• 检查以确保没有其他元素使用正在包装#nav_标题的点击

我还要注意的一点是，您多次定义id=“nav_column”；您不应该使用同一ID的多个实例

---

祝你好运

谢谢你的建议，它们都是可行的，而且效果很好。问题在于Jquery本身

这一定是Wordpress的事情，但当我更改排队的Jquery版本时，一切都正常了。它在wordpress之外的计算机上工作，但我一上线，Jquery函数就没有一个起作用

---

我把它从1.2.1改为1.11.0。我原以为它是向后兼容的，但似乎我还有很多关于Jquery的知识要学习。

什么是

desktopNavigation

？您在哪里声明了

desktopNavigation

？@briansol为什么要更改它？

==0

也会返回true，因为未定义与

==0

相同，双引号允许这句话留在评论中。这是一种修辞。现在走了。

$(document).ready(function(){        
    var state = 0;
    var navClassMap = ["red_state", "blue_state", "green_state", "hidden_state"];

    // Each click will increment the class of the UL thus toggling multiple states
    $("#nav_header").click(function(){
        var $navigation = $("#navigation");  

        // remove the current class
        var curClass = navClassMap[state];
        $navigation.removeClass(curClass);    

        // Increment to the next class (loop back to start on overflow)
        state = (state + 1) % navClassMap.length;

        // Add the new class
        var nextClass = navClassMap[state];
        $navigation.addClass(nextClass);
    });
});

#nav_header{
    width: 100%;
    height: 50px;
    background-color: #ef102f;
    cursor: pointer;
}

#nav_header:hover{
    background-color: #Ff402f;
}

.red_state{
    color: red;
}

.blue_state{
    color: blue;    
}

.green_state{
    color: green;    
}

.hidden_state{
     display: none;   
}