Question

如果屏幕尺寸低于480px，我正试图找到一种在DOM中的另一个位置打开隐藏div的方法。到目前为止，我正在移动隐藏的div，其中有一个适用于更大屏幕的attendTo功能。这工作正常，唯一的问题是我似乎无法让隐藏的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");
            }
});

}）;

Answer 1

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

Answer 2

在js中有几个用于处理媒体查询的js库，它们似乎正在寻找你正在寻找的东西。

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

Answer 3

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

$("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会在点击后检查窗口宽度。由于人们在点击后无法真正调整大小，因此它也适用于调整大小的浏览器窗口。

点击后有一个小屏幕尺寸的功能和一个大屏幕尺寸的功能

3 个答案: