JQuery最小化&最大化HTML Div

JQuery Minimize & Maximize HTML Div

本文关键字：HTML Div 最大化 最小化 JQuery      更新时间：2023-09-26

基本上我试图使一个最小化/最大化的jquery动画div。我有一个名为leftFilterBox的包装器div。在leftFilterBox中，还有另一个div用于包装名为filterContent的所有内容。因此，当我最小化窗口时，filterContent应该是折叠的，而leftFilterBox将在filterContent与jquery动画折叠的同时向下移动。最大化也是一样。下面是我的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链接:

目前，我的代码只是通过设置特定的一些css，如高度和顶部来折叠filterWindow。我想知道是否有可能使用一些jquery动画，如slideUp()或slideDown()的增强，因为我尝试过，但它不工作。

嗯，我无法让你的代码工作，但我组织了它，并添加了一些点击事件来调用你的函数。我还添加了一个背景色，以显示最大的效果，因为它不是那么明显。

更新小提琴演示

$('#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>
相关文章：