0

私は2小を持っていますか？質問

まず、スライダーの div (スライダー、左、リンク、トグル) をウィンドウの高さの 100% にすることができません。1005 で新しい div を作成できますが、これらの 4 つはリッスンしません。

次に、スライダー関数で「閉じる」と「開く」を画像に変更するにはどうすればよいですか。それらを 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: table;

.slider で、jquery で html を挿入するには、使用する必要があります

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

.text の代わりに。

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

于 2013-07-16T12:59:32.713 に答える
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 に答える