Question

    -------------
    | header    |
    ------------ 
    |  |        | 
    | L|content | 
    |  |        | 
    -------------

    -------------
    | header    |
 ---------------- 
|  <- |         | 
| L   |content  | 
|  <- |         | 
-----------------

我需要创建一个250px宽和300高的JQuery框。它将包括（1）标题（2）左边的一个小条，它应该向左滑动（向显示菜单）并在点击时返回到原始位置，以及（3）内容的右边部分。我在JQuery中相当新，并且可以想到下面的代码在chrome中或多或少有效，但在IE中却显着失败。

<html>
<head>
    <script src="jquery[1].js" type="text/JavaScript"></script>
    <style type="text/css">
        #gcontainer {
            height:300px;
            width:350px;
            background-color:#ffffff;
            margin-left:100px;

        }

        #gheader{
            height:50px;
            width:350px;
            background-color:#feee00;

        }

        #gtray{
            height:250px;
            background-color:#006600;
            width:130px;
            float:left;
            margin-left:0px;
            margin-right:0px;
            position:relative;
            z-index:0;
            overflow:hidden:
        }

        #gcontainer{
            height:250px;
            width:320px;
            margin-left:30px;
            background-color:darkblue;
            float:left;
            position:absolute;
        }
    </style>

    <script type="text/JavaScript">
    $(function(){
        $('#gtray').toggle(
        function()
            {
                $(this).stop(true).animate({marginLeft:'-100px'},'slow');
            }, 
        function()
            {
                $(this).stop(true).animate({marginLeft:'0px'},'slow');
            });
    });
    </script>
</head>
<body>


<div id="gcontainer">
    <div id="gheader"><h2>HEADER</h2></div>
    <div id="gtray">
        <span id="expander" style="width:30px;height:250px;float:left;background-color:red">O<br>p<br>e<br>n</span>
        <span style="float:left">asdas<br>SDasd<br>asdasdasd<br>asdasd<br>Sdasd</span>
    </div>
    <div id="gcontainer"></div>
</div>

</body>
</html>

请建议。

Answer 1

这里的问题似乎与您的HTML / CSS有关，而不是javascript / jquery。首先，您不应该有多个具有相同ID的div。所以我不确定为什么你有#gcontainer两次。如果要将相同的样式应用于多个div，请使用类。在你的CSS中，你是两次造型#gcontainer，这也是第二次覆盖第一次时没有意义。另外请记住始终将<!DOCTYPE html>添加到页面顶部，否则浏览器将以怪异模式呈现，这可能会发生各种意外情况。

无论如何，我删除了HTML和CSS中的额外#gcontainer并编辑了一些边距。最后，我在整个过程中添加了一个包装器并在左侧放置了边距，因此您的滑出不会离开屏幕。这应该适用于IE和Chrome：

<!DOCTYPE html> 
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.7.min.js" type="text/JavaScript"></script>
    <style type="text/css">
        #wrapper {
        margin-left: 100px;
        }

        #gheader{
            height:50px;
            width:350px;
            background-color:#feee00;

        }

        #gtray{
            height:250px;
            background-color:#006600;
            width:130px;
            float:left;
            margin-left:0px;
            margin-right:-130px;
            position:relative;
            z-index:0;
            overflow:hidden;
        }

        #gcontainer{
            height:250px;
            width:320px;
            margin-left:30px;
            background-color:darkblue;
            float:left;
            position:absolute;
        }
    </style>

    <script type="text/JavaScript">
    $(function(){
        $('#gtray').toggle(
        function()
            {
                $(this).stop(true).animate({marginLeft:'-100px'},'slow');
            }, 
        function()
            {
                $(this).stop(true).animate({marginLeft:'0px'},'slow');
            });
    });
    </script>
</head>
<body>

<div id="wrapper">
    <div id="gheader"><h2>HEADER</h2></div>
    <div id="gtray">
        <span id="expander" style="width:30px;height:250px;float:left;background-color:red">O<br>p<br>e<br>n</span>
        <span style="float:left">asdas<br>SDasd<br>asdasdasd<br>asdasd<br>Sdasd</span>
    </div>
    <div id="gcontainer"></div>
</div>
</body>
</html>

幻灯片菜单从背景到左边

1 个答案: