jquery - 高度 % 不起作用，图像在函数中

Question

我有2小？问题

首先，我无法让我的 slider div( slider 、左侧、链接和切换)达到窗口高度的 100% 我可以在 1005 处创建一个新的 div，但这四个不会听。

其次，我将如何在我的 slider 功能中更改“关闭”和“打开”图像，我尝试用 img html 替换它们，但它只是吐出文本。

jsfiddle:http://jsfiddle.net/cgRAs/

CSS:

html,body {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
#container {
    width: 100%;
    height: 100%;
    background: #d4d1ce;
    top: 0px;
}
#logo { 
    height: 109px;
    text-align: center;
    vertical-align: top;
    padding-left: 35px;
}
.slider {
    position: fixed;
    z-index: 999;
    top: 0px;
    height: 100%;
}
.left {
    display: table-cell;
    text-align: center;
    height: 100%;
    width: 10px;
    background: url(left.png);
}
.links {
    display: table-cell;
    background: #1e1c1b;
    width: 100px;
    height: 100%;
    vertical-align: middle;
}
.toggle {
    display: table-cell;
    width: 85px;
    height: 100%;
    text-align: left;
    padding-left: 15px;
    vertical-align: middle;
    cursor: pointer;
    background: url(toggle.png);
}

正文:

<script src="jquery.js"></script>
<script>
    $(document).ready(function () {
        $('.links').hide();
        $('.toggle').click(function () {
            var $this = $(this);
            $(this).siblings('.links').slideToggle(200, function () {
                $this.text($(this).is(':visible') ? 'close' : 'open');
            });

        });
    });
</script>

<div id='container'>

    <div id='logo'>
        <img src='logo.png'>
    </div>

    <div id='content'>
    </div>

</div>

<div class="slider">
    <div class="left"></div>
    <div class="links">Links here</div>
    <div class="toggle"><img src='slider_open.png'></div>
</div>  

Answer 1

你需要使用

Display: table; 

在 .slider 上，为了用 jquery 注入(inject) html，你需要使用

$(this).html("..."); 

而不是.text。

参见:http://jsfiddle.net/7cW3M/