我正在打开左侧面板“ 300px”,但是我需要打开左侧面板宽度的80%。你能告诉我如何在%处不以px为单位离开面板吗?
我想打开约80%宽度的面板。
http://jsfiddle.net/eHded/4/
.panel {
width:300px;
float:left;
height:550px;
background:#d9dada;
position:relative;
left:-300px;
}
.slider-arrow {
padding:5px;
width:10px;
float:left;
background:#d9dada;
font:400 12px Arial, Helvetica, sans-serif;
color:#000;
text-decoration:none;
position:relative;
left:-300px;
}
最佳答案
JSFiddle:
http://jsfiddle.net/eHded/1676/
CSS:
.panel {
width:80%;
left:-80%;
}
.slider-arrow {
left:-80%;
}
和JS:
$('.slider-arrow').click(function(){
var newWidth = $(this).parent().width() * 0.8;
if($(this).hasClass('show')){
$( ".slider-arrow, .panel" ).animate({
left: "+=" + String(newWidth)
}, 700, function() {
// Animation complete.
});
$(this).html('«').removeClass('show').addClass('hide');
}
else {
$( ".slider-arrow, .panel" ).animate({
left: "-=" + String(newWidth)
}, 700, function() {
// Animation complete.
});
$(this).html('»').removeClass('hide').addClass('show');
}
});
您找到
parent()
宽度,获得其80%的宽度,然后在动画中使用该宽度,而不是设置的px
宽度。关于javascript - 如何使用jQuery打开%左面板?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23370567/