0

如果屏幕尺寸低于 480 像素，我正在尝试找到一种在 DOM 中的另一个位置打开隐藏 div 的方法。到目前为止，我正在为更大的屏幕移动带有attendTo 功能的隐藏div。这工作正常，唯一的问题是我似乎无法让隐藏的 div 不移动并在 DOM 中以较小的屏幕尺寸打开它的原始位置。

$(document).ready(function() {

//determin window width
var width = $(window).width();

//hidden member info
$("div[id=member1]").click(function(){
        $(".member_info:not(#hidden_member1_info)").hide("blind",{direction:"up"}, "slow");
        if ((width >= 480)){
            $("div[id=hidden_member1_info]").appendTo("div[id=hidden_member_closer]");
            $("div[id=hidden_member1_info]").toggle("blind","slow");
            } 
        else{
            $("div[id=hidden_member1_info]").toggle("blind","slow");
            }
});

});

4

3 回答 3

0

有几个 js 库用于处理 js 中的媒体查询，它们似乎可以满足您的需求。

我认为最著名的是Inquire，但也有其他选择。

于 2013-05-27T21:57:51.387 回答
0

您已经注释了处理 div 是否出现的代码，所以我不希望它正常工作，请尝试取消注释 if 行。

于 2013-05-27T19:24:39.930 回答
0

我似乎已经解决了这个问题，并且通过稍微更改脚本也解决了调整窗口大小的问题。因此，以防万一有人知道你去。

$("div[id=member1]").click(function(){ 
var width = $(window).width(); 
$(".member_info:not(#hidden_member1_info)").hide("blind",{direction:"up"}, "slow"); 
if ((width >= 480)){ 
    $("div[id=hidden_member1_info]").appendTo("div[id=hidden_member_closer]");
} 
$("div[id=hidden_member1_info]").toggle("blind","slow"); });

这完美地工作......这样javascript会在点击后检查窗口宽度。由于人们在单击后无法真正调整大小，因此它也适用于调整大小的浏览器窗口。

于 2013-05-29T11:30:29.847 回答