jQuery show 函数有时应用内联块并阻止其他块?
我现在有一个脚本,其中经常显示和隐藏某个元素(类似于提示)。 我注意到有时内联样式显示“display: inline-block”,有时显示“display: block”。据我所知,文档仅指出它将使用“块”。
似乎发生的情况是,当定位是相对/静态时,它使用 display: inline-block
,而当元素处于 position: 时,它使用
,但它会在页面加载时设置它并保留它。display: block
:固定
因此,如果正常加载页面与向下滚动一半时加载页面相比,我的行为会有所不同,因为函数在不在视图中时会应用带有 position:fixed
的样式(以便它始终是可见)
$(function() {
checkUrlEdit();
$(window).scroll(function () {
checkUrlEdit();
});
$('a').hover(
function(){
if(!editObj && !imageUpload){
$('#urlEdit').show();
$('#urlEdit').val($(this).attr('href'));}
},
function(){
if(!editObj && !imageUpload){
$('#urlEdit').hide();}
}
);
});
function checkUrlEdit(){
if (!isScrolledIntoView('#urlEditor')) {
$('#urlEdit').addClass('floating');
} else {
$('#urlEdit').removeClass('floating');
}
}
function isScrolledIntoView(node)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var nodeTop = $(node).offset().top;
var nodeBottom = nodeTop + $(node).height();
return ((nodeBottom >= docViewTop) && (nodeTop <= docViewBottom)
&& (nodeBottom <= docViewBottom) && (nodeTop >= docViewTop) );
}
CSS:
#urlEdit.floating {
position: fixed;
top: 10px;
z-index: 99;
}
I have a script right now where a certain element is shown and hidden often (similar to a tip).
I have noticed that sometimes the inline style says 'display: inline-block' and sometimes it says 'display: block'. The documentation as far as I can see only notes that it will use 'block'.
What appears to be happening, is it's using display: inline-block
when the positioning is relative/static and is using display: block
when the element is position: fixed
but it sets this when the page is loaded and keeps it.
Therefore I have different behaviour if the page is loaded normally compared to if it's loaded while scrolled partway down, because a function applies a style with position: fixed
when it's not in view (so that it will always be visible)
$(function() {
checkUrlEdit();
$(window).scroll(function () {
checkUrlEdit();
});
$('a').hover(
function(){
if(!editObj && !imageUpload){
$('#urlEdit').show();
$('#urlEdit').val($(this).attr('href'));}
},
function(){
if(!editObj && !imageUpload){
$('#urlEdit').hide();}
}
);
});
function checkUrlEdit(){
if (!isScrolledIntoView('#urlEditor')) {
$('#urlEdit').addClass('floating');
} else {
$('#urlEdit').removeClass('floating');
}
}
function isScrolledIntoView(node)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var nodeTop = $(node).offset().top;
var nodeBottom = nodeTop + $(node).height();
return ((nodeBottom >= docViewTop) && (nodeTop <= docViewBottom)
&& (nodeBottom <= docViewBottom) && (nodeTop >= docViewTop) );
}
CSS:
#urlEdit.floating {
position: fixed;
top: 10px;
z-index: 99;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果您不喜欢这种功能,您可以随时应用您自己的自定义逻辑来编写自己的显示/隐藏插件。将此代码放入您的 JavaScript 中:
If you don't like the way this is functioning, you can always write your own show/hide plugins with your own custom logic applied. Put this code in your JavaScript:
直接来自来自 jquery 文档:
在这种情况下,最好的方法是创建一个类、相应的 css 规则,并使用 addClass/removeClass 而不是 show/hide。
straight from from the jquery documentation:
the best way in this situation is, imo, to create a class, a corresponding css rule, and use addClass/removeClass instead of show/hide.