1
我想展开和折叠jQuery中的内容。但切换反应相反。 当我进行扩展时,它会显示从下到上的内容,当我崩溃时,它会显示从上到下的内容。 而且,当它正在扩展时,我希望图像也能正确显示内容。当我崩溃时,它应该崩溃并将其设置为最高。崩溃展开在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> \t
</div>
</ons-list-item>
请问您可以制作一个jsFiddle吗? – 2014-10-10 09:33:33
我无法从onsenui网站导入css。这就是为什么发布代码。 – 2014-10-10 09:34:43
你只是让它成为一个外部资源,有一个面板:) – 2014-10-10 09:38:10