jquery 展开/切换 - 初始 div 大小

发布于 2024-12-27 21:18:38 字数 1386 浏览 1 评论 0原文

请参阅下面的代码...

我很困惑，想最初显示下面 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>

谢谢

原文

Please see my code below...

I am puzzled and want to initially show 30px (in height) of the below div. At present I can only toggle to show or hide.

What I actually want is to show the first 30px and toggle/show anything contained below that.

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

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

太阳公公是暖光 2025-01-03 21:18:38

尝试

添加此 css

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

$(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;
    });
});

演示

Try this

Add this css

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

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

回复收藏 0 原文

拥醉 2025-01-03 21:18:38

好的，所以我要做的就是将内容设置为溢出：隐藏，然后动态更改切换框的高度。如果溢出设置为隐藏，那么任何超出框的宽度/高度的内容都会......好吧，它将被隐藏。

所以你会做这样的事情：

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

无论如何，类似的事情。尚未测试该代码，但这是基本思想。

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

OK, so what I would do is set the content to overflow:hidden, and then just dynamically change the height of the box on the toggle. If overflow is set to hidden, then anything that falls outside the width/height of the box will... well, it will be hidden.

So you would do something like this:

The HTML...

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

And in the JS...

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

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

Something like that, anyway. Haven't tested that code, but that's the basic idea.

Hope that helps. Good luck :)

回复收藏 0 原文

鹿港小镇 2025-01-03 21:18:38

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/

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");
   });
});

fiddle : http://jsfiddle.net/Vknqw/

回复收藏 0 原文

寒江雪… 2025-01-03 21:18:38

你是这个意思吗？

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

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

is this what you mean ?

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

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

回复收藏 0 原文

往日 2025-01-03 21:18:38

如果我理解你想要做什么，那么你真正需要的是将你的高度设置为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/

< em>注意：这只是一个概念证明，并未使用您实际的 html 标记。需要稍微调整以适应您的具体情况。

If I'm understanding what you're trying to do, what you really need is to animate your height to auto. However, this isn't possible. I came up with this to simulate that:

$("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/

NOTE: This is just a proof of concept which is not using your actual html markup. It would need to be adjusted slightly to fit your exact situation.

回复收藏 0 原文

微暖i 2025-01-03 21:18:38

像这样的东西应该足够了：

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

Something like this should suffice:

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

回复收藏 0 原文

~没有更多了~