jquery expand / toggle - 初始div大小

时间:2012-01-20 19:01:53

标签: jquery css toggle slide expand

请参阅下面的代码......

我很困惑,并希望最初显示以下div的30px(高度)。目前我只能切换显示或隐藏。

我真正想要的是显示前30px并切换/显示下面包含的任何内容。

<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<script type="text/javascript">
  $(document).ready(function() {
  // Hide the "view" div.
  $('div.view').hide();
  // Watch for clicks on the "slide" link.
  $('div.slide').click(function() {
  // When clicked, toggle the "view" div.
  $('div.view').slideToggle(400);
  return false;
});
});
</script>
</head>
<body>
<div class="view">
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
  <p>shown/hidden depending on the toggle above. </p>
</div>
<div class="slide" style="cursor: pointer;">Show/Hide</div>
</body>
</html>

由于

6 个答案:

答案 0 :(得分:3)

试试这个

添加此css

.view{
    overflow:hidden;
    height: 30px;
}

JS

$(document).ready(function() {
    var $divView = $('div.view');
    var innerHeight = $divView.removeClass('view').height();
    $divView.addClass('view');

    $('div.slide').click(function() {
        $('div.view').animate({
          height: (($divView.height() == 30)? innerHeight  : "30px")
        }, 500);
        return false;
    });
});

<强> Demo

答案 1 :(得分:0)

好的,我要做的是将内容设置为overflow:hidden,然后动态更改切换框上的框的高度。如果溢出被设置为隐藏,那么任何超出盒子宽度/高度的东西都将......好吧,它将被隐藏。

所以你会做这样的事情:

HTML ...

<div class="view" style="overflow:hidden;height:30px">
    ... (your normal code) ...
</div>

在JS ......

$('div.slide').click(function() {
  var height = $('.view').css('height');

  if (height == 30) 
     $('.view').css('height', 'auto');
  else
     $('.view').css('height', 30);
});

无论如何都是这样的。没有测试过那段代码,但那是基本的想法。

希望有所帮助。祝你好运:)

答案 2 :(得分:0)

<强> CSS:

.view_height{
height : 30px;
overflow:hidden;
}

<强> HTML:

<div class="view view_height">

<强> Jquery的:

$(document).ready(function() {
  $('div.slide').click(function() {
     // When clicked, toggle the class.
    $('div.view').toggleClass("view_height");
   });
});

小提琴:http://jsfiddle.net/Vknqw/

答案 3 :(得分:0)

如果我理解你要做什么,你真正需要的是将你的身高设置为auto。但是,这是不可能的。我想出了这个来模拟:

$("div").click(function(){
    var $this = $(this);

    if($this.height()==30){

        // set height to auto in order to check how tall it is in current window size    
        $this.css("height","auto");
        var height = $this.height();

        // done checking height, set back to 30
        $this.css("height","30px");

        $this.animate({height: height + "px"},1000, function(){
            // animation done, set height to auto to allow resizing with window resize
            $this.css("height","auto");        
        }); 
    }else{
        $this.animate({height: "30px"},1000);
    }
});

http://jsfiddle.net/txKt7/1/

注意:这只是一个概念证明,它没有使用你的实际html标记。需要稍微调整一下以适应您的具体情况。

答案 4 :(得分:0)

这样的事情应该足够了:

<style type="text/css">
    .view { height: 30px;
            overflow: hidden;
          }
</style>

<script type="text/javascript">
    $(".slide").click(function() {
        if(!$(".view").hasClass('maximized')) {
            $(".view").addClass('maximized');
            $(".view").animate({ height: '+=250' }, 'slow');
        } else {
            $(".view").removeClass('maximized');
            $(".view").animate({height: '30' }, 'slow');
        }
    });
</script>

答案 5 :(得分:0)

这是什么意思?

http://jsfiddle.net/eiu165/ew5dH/

// Hide the "view" div.
$('p').hide();
$('p').eq(0).show();
$('span').click(function(){
    $(this).closest('p').next().toggle();
});