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在适当的元素上（通常是我不再想要显示的元素的父元素）来反映新的状态。

响应式样和jQuery .show（）/。hide（）

1 个答案: