javascript - クロムのjqueryの問題で要素が非表示になる

Question

クリックイベントで要素を非表示にしています。入力チェックボックス要素があり、クリックするとこれらの要素が非表示になります。Firefoxでは正常に動作していますが、クロムでは要素が非表示になりますが、スペースが残っています。画像を添付しました。誰かヒントあったら教えてください

!

コードはこのようなもので、

<div id="cat">  
            <div id="cat-head">
                <img src="opeb-arrow.png"></img>
                <h2 id="filter-heading"><b>Frame Styles</b></h2>
            </div>
            <input type="checkbox"><span>Geek&nbsp;(123)</span></input><br>
            <input type="checkbox"><span>Round&nbsp;Eye&nbsp;(3435)</span></input><br>
            <input type="checkbox"><span>Cat&nbsp;Eye&nbsp;(5675)</span></input><br>
            <input type="checkbox"><span>Wayfarer&nbsp;(234)</span></input><br>
            <input type="checkbox"><span>Aviator&nbsp;(545)</span></input><br>
        </div>

ジャバスクリプト、

$(function(){
    $("#cat-head img").each(function() {
        $(this).click(function() {
        if ($(this).attr("src") == "opeb-arrow.png") {
            $(this).attr("src", "close-arrow.png");
        }
        else {$(this).attr("src", "opeb-arrow.png");}   
        $(this).closest("#cat-head").siblings().toggle('fast');
    });
});
}); 

Answer 1

おそらく、jquery .hide() および .show() メソッドを使用しました。これらはFirefoxで完全に機能していますが、クロムでは非表示のdivの下にスペースが残っています。

これらのメソッドを使用して、クロムの問題を非表示および表示できます。

$('#cat-head').css('display', 'none');
$('#cat-head').css('display', 'block');

これは私の問題を解決しました。それが役に立てば幸い。