提问者:小点点

Javascript隐藏div当大小屏幕小于60%可见(当显示移动键盘时)


当用户在移动设备上填写表单时,我试图隐藏一个div,这样由于键盘显示,屏幕可以更加可见。

HTML

<div id="fixed-bottom-menu">BLA BLA BLA</div>

当移动键盘被隐藏时,JS代码必须再次显示div。

我的尝试:

<script type="text/javascript">
    if( $(window).width() < 60%)
    {
        document.write( '<style>"#fixed-bottom-menu"{visibility:hidden}</style>' );
    }
</script>

共1个答案

匿名用户

你需要一个eventlistner来做这件事,%不应该在那里,你需要检查当前视口高度比总屏幕大小少40%,以便使它工作

如果您正在使用document.write(),它将从脚本中删除jquery.使用document.write()是不可取的

请查看https://jsfiddle.net/anirudhsanthosh/hrsd8o5p

使用jquery.css()方法更改元素的css属性

<script type="text/javascript">
        $(window).resize(()=>{

         if(( window.innerHeight/screen.availHeight)*100 < 60)
         {
         
            $('#fixed-bottom-menu').css({display:"none"})
            return
         }
         $('#fixed-bottom-menu').css({display:"block"})
    })
    
    </script>