Question

我打开左侧面板＆＃34; 300px＆＃34; ，但我需要打开左侧面板80％的宽度。你可以告诉我如何左侧面板不在px中％。

我想打开大约80％宽度的面板。

.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;
}

Answer 1

试

FIDDLE DEMO

<强> CSS

.panel {
    width:80%;
    float:left;
    height:550px;
    background:#d9dada;
    position:relative;
    left:-80%;

}
.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:-80%;
}

<强>的JavaScript

$(function(){
    $('.slider-arrow').click(function(){
        if($(this).hasClass('show')){
        $( ".slider-arrow, .panel" ).animate({
          left: "+=80%"
          }, 700, function() {
            // Animation complete.
          });
          $(this).html('&laquo;').removeClass('show').addClass('hide');
        }
        else {      
        $( ".slider-arrow, .panel" ).animate({
          left: "-=80%"
          }, 700, function() {
            // Animation complete.
          });
          $(this).html('&raquo;').removeClass('hide').addClass('show');    
        }
    });

});

Answer 2

的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('&laquo;').removeClass('show').addClass('hide');
    }
    else {      
    $( ".slider-arrow, .panel" ).animate({
      left: "-=" + String(newWidth)
      }, 700, function() {
        // Animation complete.
      });
      $(this).html('&raquo;').removeClass('hide').addClass('show');    
    }
});

您会找到parent()宽度，获得80％的宽度，并在动画中使用该宽度而不是设置px金额。

如何使用jquery在％左侧打开面板？

2 个答案: