0

我有2个小？问题

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

其次，我将如何在滑块功能中将“关闭”和“打开”更改为图像，我尝试用 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>
4

3 回答 3

0

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

于 2013-07-16T12:54:11.083 回答
0

请看下面的代码：

        $(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/

于 2013-07-16T12:58:42.977 回答
0

你需要使用

Display: table;

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

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

而不是 .text。

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

于 2013-07-16T12:59:32.713 回答