javascript - jQuery:为什么第一次点击时框会折叠

Question

我们网站 (legendboats.com) 的主页有 4 个小单元格，如果您点击，大图像就会发生变化。相当标准的东西，但有一个问题。

当您第一次单击其中一个图像时，大区域会在新图像重新出现之前折叠。这种情况不会再发生了，你可以继续点击不同的图像，它们会正常淡入和淡出。这是我正在使用的代码:

$('.home_boxes a.content_box').on('click', function(e) {
    e.preventDefault();
    var new_slide = this.hash;
    $('#home_box div.active').fadeOut(function() {
        $('#home_box ' + new_slide).fadeIn().addClass('active');
    }).removeClass('active');

});

对我做错了什么有什么想法，或者有什么改进吗？

Answer 1

它会崩溃，因为您要删除 class="active"。

它在第一次后没有折叠的原因是因为 jQuery 添加了一个内联样式“display:block”，它覆盖了缺少的 class="active"。

最初:

<div id="standard_equipment" class="active">

随后:

<div id="more_power" style="display: block;" class="active">