javascript - 元素隐藏在 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');

这解决了我的问题。希望能帮助到你。