0

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

    });

    }
    );


}
);
}
);

.addClass を使用しても #branding でクラスを使用できないため、誰かが私が間違っていることを知っている場合は、助けてください。

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

2 に答える 2

0

IDセレクターで指定されたルールがクラスセレクターのルールよりも優先されるCSSの特異性に関連する問題のようです。

#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");
});
于 2013-11-06T06:26:46.683 に答える