元素隐藏在chrome中的jquery问题

Question

我在点击事件上隐藏了元素。我有输入复选框元素，点击后我隐藏这些元素。它在firefox中运行良好，但在chrome中，元素隐藏但仍留有一些空间。我附上了图片。如果有人有任何提示，请告诉我，

！

代码就是这种，

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

的javascript，

$(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中完美地工作，但在chrome中隐藏div之下的一些空间。

您可以使用这些方法隐藏和显示chrome问题;

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

这解决了我的问题。希望它有所帮助。