jQuery show 函数有时应用内联块并阻止其他块？

发布于 2024-12-05 21:57:48 字数 1510 浏览 6 评论 0原文

我现在有一个脚本，其中经常显示和隐藏某个元素（类似于提示）。我注意到有时内联样式显示“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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鹿港巷口少年归 2024-12-12 21:57:48

如果您不喜欢这种功能，您可以随时应用您自己的自定义逻辑来编写自己的显示/隐藏插件。将此代码放入您的 JavaScript 中：

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

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:

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

回复收藏 0 原文

相守太难 2024-12-12 21:57:48

直接来自来自 jquery 文档：

不带参数，.show()方法是最简单的显示方式
一个元素：
$('.target').show();
匹配的元素将立即显示，没有动画。
这大致相当于调用 .css('display', 'block')，除了
显示属性恢复到最初的状态。如果
一个元素的显示值为内联，然后隐藏和显示，它
将再次内联显示。

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