Question

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

我很困惑，并希望最初显示以下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>

由于

Answer 1

试试这个

添加此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

Answer 2

好的，我要做的是将内容设置为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);
});

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

希望有所帮助。祝你好运：）

Answer 3

<强> 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/

Answer 4

如果我理解你要做什么，你真正需要的是将你的身高设置为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标记。需要稍微调整一下以适应您的具体情况。

Answer 5

这样的事情应该足够了：

<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>

Answer 6

这是什么意思？

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

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

jquery expand / toggle - 初始div大小

6 个答案: