高度％不工作和功能中的图像答案

【问题标题】：height % not working and images in a function高度％不工作和功能中的图像
【发布时间】：2013-07-16 20:59:32
【问题描述】：

我有两个小的？问题

首先，我无法将我的滑块 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>

【问题讨论】：

你能提供一个 jsfiddle 吗？
jsfiddle.net/cgRAs
改进：先把文字改成关闭再打开链接栏:)

标签： jquery css

【解决方案1】：

你需要使用

Display: table;

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

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

而不是 .text。

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

【讨论】：

【解决方案2】：

使用display:block 代替表格单元定位。将 100% 高度设置为#logo。 jQuery 有一个 toggle() 函数可以轻松地显示/隐藏 div。 toggle

【讨论】：

【解决方案3】：

请看下面的代码：

        $(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() 并与图像标签一起使用。你只需要设置你的初始 html 来显示你想要的任何链接。

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

【讨论】：