Question

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

似乎正在发生的事情是，当定位是相对/静态时使用display: inline-block并且当元素是display: block时使用position: fixed但是在页面加载时设置它并保留它。

因此，如果页面正常加载，那么我有不同的行为，而如果在向下滚动时加载了它，因为当函数不在视图中时，函数会应用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;
}

Answer 1

直接来自from the jquery documentation：

没有参数，.show（）方法是最简单的显示方式   元素：

$（ '目标'）显示（）;

匹配的元素将立即显示，没有动画。   这大致相当于调用.css（'display'，'block'），除了   display属性恢复到最初的状态。如果   元素的显示值为内联，然后隐藏并显示   将再次以内联方式显示。

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

Answer 2

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

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

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

2 个答案: