Question

我有2个小？问题

首先我无法将滑块div（滑块，左侧，链接和切换）设置为100％的窗口高度，我可以在1005处创建一个新的div，但这四个不会听。

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

的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:block代替表格单元格定位。将100％的高度设置为#logo。 jQuery有一个toggle（）函数来轻松显示/隐藏div。 toggle

Answer 2

请参阅以下代码：

        $(document).ready(function () {
        $('.links').hide();
        $('.toggle').click(function () {
            var $this = $(this);
            $(this).siblings('.links').slideToggle(200, function () {
                $this.html($(this).is(':visible') ? "<img src='http://www.google.com/images/srpr/logo4w.png' />" : "<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg' />");
            });

        });
    });

我已将text（）更改为html（），并使用了image标签。你只需要设置你的初始html来显示你想要的任何链接。

这是我的小提琴版本：http://jsfiddle.net/cgRAs/3/

Answer 3

您需要使用

Display: table;

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

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

而不是.text。

请参阅：http://jsfiddle.net/7cW3M/

高度％不起作用和功能中的图像

3 个答案: