高度％不工作，圖像在功能

首先IM無法得到我的滑塊的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>

來源

2013-07-16 user2558771

，你可以提供一個的jsfiddle？ –

http://jsfiddle.net/cgRAs/ – user2558771

改進：首先更改文本關閉再打開鏈接吧:) –

您需要使用

Display: table;

上.slider

，爲了與你需要使用

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

代替jQuery的注入HTML文本。

參見：http://jsfiddle.net/7cW3M/

來源

2013-07-16 12:59:32

真棒，謝謝 – user2558771

使用display:block，而不是表細胞定位。將100％高度設置爲#logo。 jQuery有一個toggle（）函數來輕鬆顯示/隱藏div。 toggle

來源

2013-07-16 12:54:11

請參見下面的代碼：

 $(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' />"); 
      }); 

     }); 
    });

我已經改變了你的文字（）以HTML（），並與圖像標記工作。你只需要設置你的初始html來顯示你想要的任何鏈接。

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

來源

2013-07-16 12:58:42 Toiletduck

高度％不工作，圖像在功能

回答

相關問題