打开左侧和右侧面板if(window.innerWidth> 800)

时间:2016-04-04 09:34:04

标签: javascript jquery

我想打开两个侧面板(panel_Left和panel_Right)只有 if(window.innerWidth> 800)但总是只打开一个面板

window.onresize = function (event) {
    if (window.innerWidth > 800) {
        window.setTimeout(openPanel, 1);
    }
    if (window.innerWidth < 800) {
        window.setTimeout(closePanel, 1);
    }
};


function closePanel() {
    $("Panel_left").panel("close");
    $("#Panel_right").panel("close");
}

function openPanel() {
    $("#Panel_left").panel("open");
    $("#Panel_right").panel("open");
}


$("#Panel_left").on("panelcreate", function (event, ui) {
    if (window.innerWidth > 800) {
        openPanel();
    }
    if (window.innerWidth < 800) {
        closePanel();
    }
});

会意 我用过(jquery.mobile-1.4.5.min.js)

1 个答案:

答案 0 :(得分:0)

window.onresize = function(event) {
    if (window.innerWidth > 800) {
        console.log("hi");
        document.getElementById("left").style.display = "block";
        document.getElementById("right").style.display = "block";
        // window.setTimeout(openPanel, 1);
    } else {
        document.getElementById("right").style.display = "none";
        document.getElementById("left").style.display = "none";
        console.log("hello");
        // window.setTimeout(closePanel, 1);
    }
};
window.onload = function() {
    if (window.innerWidth > 800) {
        console.log("hi");
        document.getElementById("left").style.display = "block";
        document.getElementById("right").style.display = "block";
        // window.setTimeout(openPanel, 1);
    } else {
        document.getElementById("right").style.display = "none";
        document.getElementById("left").style.display = "none";
        console.log("hello");
        // window.setTimeout(closePanel, 1);
    }
}
#left,
#right {
    width: 10%;
    display: inline-block;
}

#left {
    float: left;
}

#right {
    float: right;
}
<!DOCTYPE html>
<html>

<head>
    <title>stack</title>
    
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="left">hi</div>
    <div id="right">hello</div>
    <script type="text/javascript" src="controller.js"></script>
</body>

</html>

你需要这个吗?@mo bi