jquery - 响应式样式和 jQuery .show()/.hide()

Question

jQuery 的 .show 和 .hide 方法似乎检查元素的显示值并尝试恢复它，但作为内联样式这样做会对不太具体的样式产生不利影响(例如，响应式样式表会改变您还想使用 jQuery 显示或隐藏的元素的布局)。

举个例子:

标记

<div class="parent altLayout">
  <div class="child">hi</div>
</div>

样式

.parent {
    height: 40px;
    background: #06f;
    padding: 30px;
}

.child {
    height: 40px;    
    background: #eef;
}

.altLayout .child {
    display: inline;
}

JavaScript

// Uncomment each block to see the effect

// w/o altLayout
/* * /
$('.parent').removeClass('altLayout');
/* */

// remove before hide/show
/* * /
$('.parent').removeClass('altLayout');
$('.child').hide();
$('.child').show();
/* */

// remove after hide/show
/* * /
$('.child').hide();
$('.child').show();
$('.parent').removeClass('altLayout');
/* */

fiddle :http://jsfiddle.net/jinglesthula/ZttLJ/

(在这里，我粗略地模拟了媒体查询在不同断点处可能发生的情况，这些媒体查询将交替应用 .altLayout 涵盖的样式。给出的代码也可能是一个合法的用例，而不是响应式媒体查询。)

据我所知，挥之不去的内联显示样式导致了不一致。我的问题是是否有办法解决这个问题？也许这是 .show/.hide 方法中的一个缺陷，它假设原始计算值可以作为内联样式引入而不影响其他代码。

Answer 1

问题是 show 和 hide 是相当自信的语句。考虑一个常见的用例，某人将对象设置为默认隐藏(通过使用带有 display: none 的类或通过内联样式做同样的事情)然后调用 show 在合适的事件之后。无论如何，他们希望该元素出现。可靠地做到这一点的唯一方法是设置内联样式。

作为个人喜好，我倾向于非常谨慎地使用 show 和 hide，因为删除元素的副作用会导致不希望的布局问题，正如您已经确定。相反，我通常在适当的元素(通常是我不想再显示的元素的父元素)上 toggleClass 以反射(reflect)新状态。