响应式样式和 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');
/* */

小提琴：http://jsfiddle.net/jinglesthula/ZttLJ/

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

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

Answer 1

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

作为个人喜好，我倾向于非常谨慎地使用show 和hide，因为正如您所指出的，删除元素的副作用可能会导致不希望出现的布局问题。相反，我通常在适当的元素上toggleClass（通常是我不想再显示的元素的父元素）来反映新状态。