我正在打开左侧面板“ 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/

10-09 21:27
查看更多