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 specificity相关的问题，其中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");


}
);

toggleClass没有在基础上工作

2 个答案: