崩潰展開在jquery

我想展開和摺疊jQuery中的內容。但切換反應相反。當我進行擴展時，它會顯示從下到上的內容，當我崩潰時，它會顯示從上到下的內容。而且，當它正在擴展時，我希望圖像也能正確顯示內容。當我崩潰時，它應該崩潰並將其設置爲最高。崩潰展開在jquery

前：

enter image description here

我需要這樣的：

enter image description here

這裏是我試過了。

ons.bootstrap(); 
 
$(document).ready(function() { 
 
    $(".header").click(function() { 
 
    $(".content").slideToggle(); 
 
    }); 
 
});

<link href="http://components.onsen.io/onsen-css-components-default.css" rel="stylesheet" /> 
 
<link href="http://components.onsen.io/patterns/lib/onsen/css/onsenui.css" rel="stylesheet" /> 
 
<script src="http://components.onsen.io/patterns/lib/onsen/js/angular/angular.js"></script> 
 
<script src="http://components.onsen.io/patterns/lib/onsen/js/onsenui.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<ons-list-item style="min-height: 20px; line-height: 20px;" class="list__item ons-list-item-inner"> 
 
    <div style="cursor:pointer; margin-left: 291px;" class="header"> 
 
    <ons-icon style="font-size: 23px; font-weight: bold; color: #000000; width: 1em" icon="ion-navicon" class="ons-icon ion-more ons-icon--ion ons-icon--fw fa-lg"></ons-icon> 
 
    </div> 
 
    <div style="margin-left: 12px; margin-top: -15px; display: block;" class="content"> 
 
    <span style="font-family: Arial; font-size: 14px; color: #666666;">Content 1<br>content 2</span> \t 
 
    </div> 
 
</ons-list-item>

來源

2014-10-10 UI_Dev

請問您可以製作一個jsFiddle嗎？ – 2014-10-10 09:33:33

我無法從onsenui網站導入css。這就是爲什麼發佈代碼。 – 2014-10-10 09:34:43

你只是讓它成爲一個外部資源，有一個面板:) – 2014-10-10 09:38:10

-1

的。內容的div應該開始爲顯示：如果要達到這樣的效果沒有。

來源

2014-10-10 09:50:20

崩潰展開在jquery

回答

相關問題