Question

我不是在寻找手风琴功能，而是在单击单个元素时切换多个状态的功能。我认为这将非常简单，而且确实如此。代码根本不起作用。任何人都可以查看代码并提出我可能尝试的建议吗？

$(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;

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

<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-->

我正在wordpress页面上执行此代码，并且它在我的本地环境中完美运行也可能是恰当的。

Answer 1

你的问题缺乏背景。 “代码根本不起作用”是什么意思？ “desktopNavigation”在哪里定义？ “切换多个州”究竟意味着什么？

在假设下，人们无法给出直接，简洁的答案。话虽如此，这里有一个例子，希望能回答你的问题：

JSFiddle：http://jsfiddle.net/seibert_cody/mk6juczp/1/

HTML：

<div>
    <div id="nav_header"></div>    
    <ul id="navigation">
        <li>I</li>
        <li>Am</li>
        <li>Iron</li>
        <li>Man</li>
    </ul>    
</div>

JS：

$(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);
    });
});

CSS：

#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;   
}

Answer 2

在您提供的代码中，不清楚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) {
...

Answer 3

在点击功能上方，添加：

var desktopNavigation = 0;

Answer 4

desktopNavigation可能未定义。

但如果您的目标是隐藏div，我建议您使用内置的jQuery函数.toggle()

$("#navigation").toggle();

或者，如果您想切换多个更广泛的样式，请使用.toggleClass()添加或删除自定义类。

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

Answer 5

通过“本地环境”，您的意思是您在本地计算机上设置了wordpress环境吗？如果更改在您的本地而不是您的遥控器上运行，我会尝试：

清除浏览器缓存并刷新远程环境
使用chrome“inspect element”检查#navigation 元素并确保不包含任何可能隐藏#navigation <的额外css / p>
点击#nav_header时打印到控制台;这是为了确保点击回调按预期工作
检查以确保没有其他元素消耗包含#nav_header的点击

我还要注意的一件事是你多次定义 id =“nav_column”;您不应该使用多个具有相同ID的实例。

祝你好运

Answer 6

感谢您的建议，他们都很可行并且工作得很好。问题在于Jquery本身。

这一定是Wordpress的东西，但是当我更改了入队的Jquery版本时，一切正常。它在wordpress之外的计算机上工作，但是一旦我把它放到现场，Jquery函数都没有工作。

我将它从1.2.1更改为1.11.0。我认为它是向后兼容的，但似乎我有很多东西要学习Jquery。

简单的jQuery函数在单击另一个时折叠div不起作用

6 个答案: