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

发布于 2024-12-05 21:57:48 字数 1510 浏览 1 评论 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;
}

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

鹿港巷口少年归 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');
  }
});
相守太难 2024-12-12 21:57:48

直接来自来自 jquery 文档

不带参数,.show()方法是最简单的显示方式
一个元素:

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

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

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

straight from from the jquery documentation:

With no parameters, the .show() method is the simplest way to display
an element:

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

The matched elements will be revealed immediately, with no animation.
This is roughly equivalent to calling .css('display', 'block'), except
that the display property is restored to whatever it was initially. If
an element has a display value of inline, then is hidden and shown, it
will once again be displayed inline.

the best way in this situation is, imo, to create a class, a corresponding css rule, and use addClass/removeClass instead of show/hide.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文