如何獲得動畫但仍然隱藏ol？
[英]How to get animation but still hide ol?
問題描述
我的訂購清單有問題，我想要動畫，但我也希望隱藏訂購清單。 當列表未打開時，列表之間存在間隙。
所以我的問題是：如何使有序列表display: none並且在關閉時仍display: none動畫。 如何將列表作為標准關閉？
function loadul(name) { var elem = $('#' + name); if (elem.hasClass('show-list')) { elem.removeClass('show-list'); elem.addClass('hide-list') elem.data('height', elem.outerHeight()) elem.css('height', '0px') } else { elem.removeClass('hide-list'); elem.addClass('show-list') elem.css('height', elem.data('height')) } }
.sub-list { overflow: hidden; transition: all 300ms; } .hide-list { display: none; }
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <li id="work" OnClick="loadul('list1')"> List </li> <ol class="sub-list show-list" id="list1"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol> <li id="work" OnClick="loadul('list2')"> List </li> <ol class="sub-list show-list" id="list2"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol>
3 個解決方案
解決方案1
2 已采納 2018-11-01 10:40:50
您可以使用默認的bootstrap .collapse類進行這種折疊。
Bootstrap崩潰附帶默認的幻燈片動畫
嘗試這個
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="lists"> <span data-toggle="collapse" data-target="#demo">List Number 1</span> <ul id="demo" class="collapse"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> </div> <div class="lists"> <span data-toggle="collapse" data-target="#demo1">List Number 2</span> <ul id="demo1" class="collapse"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> </div> </body> </html>
解決方案2
1 2018-11-01 09:46:55
正如@Viira對您的問題進行評論時，您似乎可以為此使用jQuery手風琴（因為您已經包含jQuery）。 我在這里用您的數據制作了一個示例： https : //jsfiddle.net/kr4qhy9m/ 。
HTML：
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="accordion">
<h3>List 1</h3>
<div>
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</div>
<h3>List 2</h3>
<div>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</div>
</div>
使用Javascript：
$(function() {
$("#accordion").accordion();
});
解決方案3
0 2018-11-01 10:03:14
而不是display:none您可以為ul設置min-height的動畫我為動畫添加了min-height ，我更改了html因為它無效
function loadul(name) { var elem = $('#' + name); if (elem.hasClass('show-list')) { elem.removeClass('show-list'); elem.addClass('hide-list') elem.data('height', elem.outerHeight()) elem.css('height', '0px') } else { elem.removeClass('hide-list'); elem.addClass('show-list') elem.css('height', elem.data('height')) } }
.sub-list { overflow: hidden; transition: all 300ms; min-height: 100px; } .hide-list { min-height: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div id="work" OnClick="loadul('list1')"> List </div> <ol class="sub-list show-list" id="list1"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol> </div> <div> <div id="work" OnClick="loadul('list2')"> List </div> <ol class="sub-list show-list" id="list2"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ol> </div>
jQuery hide-如何知道元素是否已開始隱藏但仍可見？
[英]jQuery hide - how to know if element has started to hide but still visible?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.