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

首先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

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

回答

相关问题