6

我发现（从这个问题 - Hide div if screen is小于一定宽度）这段代码

  $(document).ready(function () {

    if (screen.width < 1024) {
        $("#floatdiv").hide();
    }
    else {

        $("#floatdiv").show();
    }

});

唯一的问题是，我似乎无法让代码工作，我只需要为 IE 工作，我将为其他（较新的）浏览器使用媒体查询。关于我哪里出错的任何提示/提示？

到目前为止我有 <div id="floatdiv">

然后在那个 div 的末尾（关闭的地方）我有

<!--[if lt IE 9]>
<script type="text/javascript" src="http://dl.dropbox.com/u/17087195/website/sidebar_size.js"></script>
<![endif]-->

在我的标题中，我有 <script type='text/javascript' src='http://www.itsdaniel0.com/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>

而且我仍然无法使代码正常工作（在 IE8 中测试） 我还在某个地方出错吗？

更新我确实链接了另一条 jQuery，这会导致问题吗？这是下面的完整代码

<div id="floatdiv">

<div class="floating-menu">

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.itsdaniel0.com%2F2011%2F03%2Funicorns-are-cool%2F&amp;layout=box_count&amp;show_faces=true&amp;width=55&amp;action=like&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:55px; height:65px;" allowTransparency="true"></iframe>

<br /><br /><a href="http://twitter.com/share?url=http%3A%2F%2Fid0.me%2Fj0&amp;counturl=http://www.itsdaniel0.com/2011/03/unicorns-are-cool/" class="twitter-share-button" data-text="Unicorns Are Cool" data-count="vertical" data-via="itsdaniel0 #itsdaniel0">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<br /><br />

<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

</div>

</div>

<script type="text/javascript" src="http://dl.dropbox.com/u/17087195/website/sidebar.js"></script>

<!--[if lt IE 9]>

<script type="text/javascript" src="http://dl.dropbox.com/u/17087195/website/sidebar_size.js"></script>

<![endif]-->

错误信息

网页错误详情

用户代理：Mozilla/4.0（兼容；MSIE 7.0；Windows NT 5.1；Trident/4.0；chromeframe/10.0.648.133；.NET CLR 1.1.4322；.NET CLR 2.0.50727；.NET CLR 3.0.4506.2152；.NET CLR 3.5.30729；OfficeLiveConnector.1.5；OfficeLivePatch.1.3；.NET4.0C；.NET4.0E；InfoPath.2) 时间戳：2011 年 3 月 12 日星期六 11:31:32 UTC

消息：预期的标识符、字符串或数字行：140 字符：1 代码：0 URI：www.itsdaniel0.com/2011/03/unicorns-are-cool/

消息：对象不支持此属性或方法行：16 字符：1 代码：0 URI：dl.dropbox.com/u/17087195/website/sidebar_size.js

消息：'twttr.anywhere._instances' 为空或不是对象行：1 字符：5207 代码：0 URI：platform.twitter.com/anywhere.js?id=6vIPELyEeU5vcSc3c0Q5w&v=1

消息：'twttr.anywhere._instances' 为空或不是对象行：1 字符：5207 代码：0 URI：platform.twitter.com/anywhere.js?id=6vIPELyEeU5vcSc3c0Q5w&v=1

由于“低代表”错误，从 URL 中删除了 http

4

3 回答 3

13

使用 JQUERY 的旧答案：

//the function to hide the div
function hideDiv(){

    if ($(window).width() < 1024) {

            $("#floatdiv").fadeOut("slow");

    }else{

        $("#floatdiv").fadeIn("slow");

    }

}

//run on document load and on window resize
$(document).ready(function () {

    //on load
    hideDiv();

    //on resize
    $(window).resize(function(){
        hideDiv();
    });

});

编辑：请注意，现在对 css3 媒体查询有更多的跨浏览器支持，使用这些而不是 javascript 会更有效。

使用 CSS。

/* always assume on smaller screen first */

#floatdiv {
    display:none;
}

/* if screen size gets wider than 1024 */

@media screen and (min-width:1024px){
    #floatdiv {
        display:block;
    }
}

请注意，在大多数现代浏览器中，您还可以使用 window.matchMedia 在 javascript 中运行媒体查询

if(window.matchMedia("(min-width:1024px)").matches){
    console.log("window is greater than 1024px wide");
}
于 2011-03-11T20:33:30.997 回答
4

您需要设置屏幕元素：

var screen = $(window)

例如：

$(document).ready(function () {

    var screen = $(window)    

    if (screen.width < 1024) {
        $("#floatdiv").hide();
    }
    else {

        $("#floatdiv").show();
    }

});
于 2011-03-11T20:22:00.160 回答
3

媒体查询获胜

如果浏览器窗口处于一定宽度，如何使 div 不显示？

@media all and (max-width: 1024px) { /* Change Width Here */
  div.class_name {
     display: none;
  }
}
于 2013-05-09T10:14:33.900 回答