javascript - 在 jquery 中折叠展开

Question

我正在尝试展开和折叠 jquery 中的内容。但是切换响应相反。当我展开时，它是从下到上显示内容，当我折叠时，它是从上到下显示内容。而且，当它扩展时，我希望图像也与内容保持一致。当我折叠时，它应该折叠并将其设置为顶部。

之前:

我需要这样:

这是我尝试过的。

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>	
  </div>
</ons-list-item>

Answer 1

如果你想达到那种效果，.content div 应该以 display:none 开头。