JQuery最小化和最大化HTML Div

基本上我試圖做一個最小化/最大div與jquery動畫。我有一個名爲leftFilterBox的包裝div。在leftFilterBox中，還有另一個div來包裝名爲filterContent的所有內容。所以當我最小化窗口時，filterContent應該是崩潰的，並且當filterContent與jquery動畫合併時，leftFilterBox將同時向下移動。同樣是最大化。這裏是我的html代碼：JQuery最小化和最大化HTML Div

<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。我想知道是否有可能使用一些jQuery動畫，如slideUp()或slideDown()進行增強，因爲我試過了，但它不起作用。

在此先感謝。

來源

2014-06-21 I Was So Lost

你的小提琴被打破。請在嘗試排除故障/提出建議之前糾正它。 –

它使用這些代碼在我的網站上工作。我不知道爲什麼它在小提琴中被打破了 –

嗯，我無法讓你的代碼工作，但我組織它並添加了一些點擊事件來調用你的函數。我還添加了背景顏色以顯示效果最大化，因爲效果不明顯。

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

來源

2014-06-21 03:10:17 olingern

當然，非常感謝。但是，我怎麼能讓它首先擴大。然後，當我點擊最小化時，filterContent將與動畫合併，左側的FilterBox標題也將在內容合攏時向下移動。最大限度地發揮作用。謝謝。 –

JQuery最小化和最大化HTML Div

回答

相關問題