jquery - toggleClass 在基础上不起作用

Question

我在使用 Zurb 基础的页面上的 CSS 页面上有这个类。

.brandingOpen{
height:2044px;

}

我有一个 id 为的按钮 #zoomBranding，到目前为止，我已经尝试过了，但没有任何结果。

$("zoomBranding").click(function(){

$("#branding").toggleClass("brandingOpen");


}
);

根本不工作，如果我发出警报，这很好用，但 toggleClass 不行。

到目前为止，我已经尝试了这个结果，但只有一次：

$(document).ready(function(){
$("#zoomBranding").click(function(){

    $(this).toggleClass( function(){
    $("#branding").css("height", "2044px");
    $(this).addClass("fi-zoom-out");
    $(this).click( function(){
        $("#branding").css("height", "1044px");

    });

    }
    );


}
);
}
);

我不能在#branding 中使用类，即使使用 .addClass 所以如果有人知道我做错了什么，请帮助我。

使用 Foundation 4 中已经包含的查询版本，甚至尝试在所有内容的顶部使用 jquery-migrate，都是相同的结果。

这是#branding的CSS。

#branding{
height:1044px;
overflow:hidden;
 -webkit-transition: height 0.5s linear;
  -moz-transition: height 0.5s linear;
  transition: height 0.5s linear;


}

.brandingOpen{
    height:2044px;
}

Answer 1

它看起来像一个与css 特异性相关的问题，其中由 ID 选择器指定的规则优先于来自类选择器的规则。

#branding {
    height:1044px;
    overflow:hidden;
    -webkit-transition: height 0.5s linear;
    -moz-transition: height 0.5s linear;
    transition: height 0.5s linear;
}
#branding.brandingOpen {
    height:2044px;
}

看起来还有一个小脚本问题，所以试试

$("zoomBranding").click(function () {
    $("branding").toggleClass("brandingOpen");
});

Answer 2

最后经过一些研究我得到了它，出于某种奇怪的原因，基金会不会在 id #branding 上使用 toggleClass，而是创建了一个类，然后我交换了我将 e 放入函数中的类，从点击开始，现在正在工作，这是代码

$("#zoomBranding").click(function(e){
    e.preventDefault();
    $(".closedNow").toggleClass("brandingOpen");
    $(this).toggleClass("fi-zoom-out");


}
);