-1

我正在尝试获取我的 div 的自动高度,通常是通过 css 160px 设置的 div 框,但溢出:隐藏;我如何通过 jquery 检查自动高度是否超过 160 像素?

我需要这个,因为我有盒子,我有一个显示更多或显示更少的按钮,所以如果高度不大于通常高度 160px 来传递命令......现在它让我的盒子更小

我的代码是这样的:

<script type="text/javascript">
 $("#Show_More_Websites").click(function() {
  var Button_Value = $("#Show_More_Websites").attr("value");
  var Box_Height   = $('.Box_Show_Websites').outerHeight();

  if(Button_Value == "Show More") {
   if(Box_Height <= "160") {
    var el = $('.Box_Show_Websites'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
    el.height(curHeight).animate({height: autoHeight}, 500);
   }
   $("#Show_More_Websites").attr('value', 'Show Less');
  }

  if(Button_Value == "Show Less") {
   var el = $('.Box_Show_Websites'),
   curHeight = el.height(),
   autoHeight = el.css('height', '160px').height();
   el.height(curHeight).animate({height: autoHeight}, 500);


   $("#Show_More_Websites").attr('value', 'Show More');
  }
 });
</script> 

更新

在这里你可以找到我的代码:http: //jsfiddle.net/rAjBH/

4

1 回答 1

1

这是解决方案

演示小提琴 -注意:以下小提琴仅在 html 部分有所更改,以使用 html 增加自动高度<br/>

http://jsfiddle.net/rAjBH/1/ - autoHeight 更少
http://jsfiddle.net/rAjBH/2/ - 自动高度更多

 $(document).ready(function() {
 $("#Show_More_Websites").click(function() {
  var Button_Value = $("#Show_More_Websites").attr("value");
  var el = $('.Box_Show_Websites')
  var Box_Height   = el.outerHeight();
  var autoHeight =  el.css('height', 'auto').height();
  el.css('height',Box_Height+'px');

  if(Button_Value == "Show More") {
    if(autoHeight > Box_Height) {
      el.height(curHeight).animate({height: autoHeight}, 500);
    }
    $("#Show_More_Websites").attr('value', 'Show Less');
  }

  if(Button_Value == "Show Less") {
    curHeight = el.height();
    autoHeight = el.css('height', '160px').height();
    el.height(curHeight).animate({height: autoHeight}, 500);
    $("#Show_More_Websites").attr('value', 'Show More');
  }
});
});
于 2013-05-21T08:08:35.767 回答