请参阅下面的代码......
我很困惑,并希望最初显示以下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>
由于
答案 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");
});
});
答案 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);
}
});
注意:这只是一个概念证明,它没有使用你的实际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();
});