jQuery show 函数有时会应用 inline-block 并阻止其他函数？答案

【问题标题】：jQuery show function applies inline-block sometimes and block others?jQuery show 函数有时会应用 inline-block 并阻止其他函数？
【发布时间】：2011-12-15 13:14:41
【问题描述】：

我现在有一个脚本，其中经常显示和隐藏某个元素（类似于提示）。我注意到有时内联样式会显示“显示：内联块”，有时会显示“显示：块”。据我所知，文档仅说明它将使用“块”。

似乎发生了什么，当定位是相对/静态时它使用display: inline-block，当元素为position: fixed时使用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;
}

【问题讨论】：

标签： jquery position show-hide css-position

【解决方案1】：

如果您不喜欢它的运行方式，您可以随时编写自己的显示/隐藏插件并应用您自己的自定义逻辑。将此代码放入您的 JavaScript：

$.fn.extend({
  myShow: function() {
    return this.css('display','block');
  }, 
  myHide: function() {
    return this.css('display', 'none');
  }
});

【讨论】：

【解决方案2】：

直接来自from the jquery documentation：

没有参数，.show() 方法是最简单的显示方式一个元素：

$('.target').show();

匹配的元素将立即显示，没有动画。这大致相当于调用 .css('display', 'block')，除了显示属性恢复到最初的状态。如果一个元素的显示值为 inline，然后被隐藏和显示，它将再次内联显示。

在这种情况下最好的方法是，imo，创建一个类，一个相应的css规则，并使用addClass/removeClass而不是show/hide。

【讨论】：