基本上,我正在尝试使用 jquery 动画制作最小化/最大化 div。我有一个名为 leftFilterBox
的包装器 div。在 leftFilterBox 中,还有一个 div 将所有名为 filterContent
的内容包裹起来。因此,当我最小化窗口时,filterContent 应该折叠,当 filterContent 使用 jquery 动画折叠时,leftFilterBox 将同时向下移动。同样去最大化。这是我的 html 代码:
<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
<div id='filterWindowNav'><img class='minMaxFilterBox' src='img/minimizeFilterWindow.png' onClick='minimizeFilterWindow();' />
<img class='minMaxFilterBox' src='img/maximizeFilterWindow.png' onClick='maximizeFilterWindow();' />
<img class='closeFilterBox' onclick='closeLeftFilterBox();' alt='close' src='img/closeFilterWindow.png' /></div></div><br/>
<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span><hr width='85%'></div>
</div>
还有我的 CSS:
#filterWindowNav {
float:right;
}
.minMaxFilterBox, .closeFilterBox {
width: 28px;
height: 28px;
cursor: pointer;
}
还有我的 JavaScript:
function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
$('#leftFilterBox').css('height', '65%');
$('#leftFilterBox').css('top', '30%');
}
这是我的 jsFiddle 链接:Fiddle
目前,我的代码只是通过设置特定的一些 css(例如高度和顶部)来折叠 filterWindow。我想知道是否可以使用像 slideUp()
或 slideDown()
这样的 jquery 动画来增强效果,因为我试过了,但它不起作用。
提前致谢。
最佳答案
嗯,我无法让你的代码工作,但我组织了它并添加了一些点击事件来调用你的函数。我还添加了背景颜色以显示正在发生的最大化效果,因为它并不那么明显。
已更新 fiddle demo
$('#minimize').click(function(){
minimizeFilterWindow();
});
$('#maximize').click(function(){
maximizeFilterWindow();
});
function minimizeFilterWindow() {
$('#leftFilterBox').css('height', '25px');
$('#leftFilterBox').css('top', '90%');
}
function maximizeFilterWindow() {
$('#leftFilterBox').css('height', '65%');
$('#leftFilterBox').css('top', '30%');
$('#leftFilterBox').css('background-color', '#000');
}
更新后的 HTML
<div id='leftFilterBox'>
<div style='background: linear-gradient(#848484, #2E2E2E);color: white;line-height:2.2em;padding-left:5%;width:auto;font-weight:bold;'>Traffic Conditions
<div id='filterWindowNav'>
<img id='minimize' src='img/minimizeFilterWindow.png' />
<img id='maximize' src='img/maximizeFilterWindow.png' />
<img id='close' alt='close' src='img/closeFilterWindow.png' />
</div>
</div>
<br/>
<div id='filterContent'><span class='getLiveTrafficTitle'><center>Select date</center></span>
<hr width='85%' />
</div>
</div>
关于javascript - JQuery 最小化和最大化 HTML Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24337834/