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

标签 jquery css

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 方法中的一个缺陷,它假设原始计算值可以作为内联样式引入而不影响其他代码。

最佳答案

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

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

关于jquery - 响应式样式和 jQuery .show()/.hide(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23023948/

相关文章:

javascript - 流体宽度单行文本区域

javascript - 让谷歌地图出现在特定的 div 中

javascript - 使用带超时的 Promise

html - 在设置网页样式时是否必须使用位置属性?

html - 悬停一个元素时如何影响其他元素

javascript - 谷歌图表 : Chart within tooltip not displaying

css - 根据内部列表元素的数量调整 div 宽度

javascript - 根据元素加载不同的图库 slider

jquery - 用多个类替换 div 上的类名

javascript - jQuery 搜索表单 - 如何定向到内部页面