Knockout.js：没有jQuery UI的手风琴/折叠元素

Question

如何在没有jQuery UI的情况下创建简单的淘汰赛手风琴？

存在的唯一示例似乎都带有jquery Ui。

HTML示例：

<div class="alert alert-warning alert-detailed">
    <span>Header</span>
    <a title="Open detailed description" class="right toggle-details"><i class="fa fa-angle-double-down"></i> View details</a>    
    <p>Content
    <a title="Dismiss alert" class="right dismiss-alert"><i class="fa fa-trash"></i> Dismiss</a>    
</p>

Answer 1

最简单的实现：

 function Accordion(items, openIndex) { var self = this; self.items = ko.observableArray(items); self.openItem = ko.observable(items[openIndex]); } var items = [ {header: "Item 1", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."}, {header: "Item 2", content: "Mauris at metus eget eros ultrices lobortis."}, {header: "Item 3", content: "Nunc lorem elit, facilisis in ante vitae, viverra pretium tortor."} ]; ko.applyBindings( new Accordion(items, 1) ); 

 ul.accordion { padding-left: 0; list-style: none; border-top: 1px solid silver; } ul.accordion > li { padding: 5px; border-bottom: 1px solid silver; } ul.accordion > li > .content { display: none; } ul.accordion > li > .header { cursor: pointer; font-weight: bold; } ul.accordion > li.accordion-open > .header { cursor: auto; } ul.accordion > li.accordion-open > .content { display: block; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <ul class="accordion" data-bind="foreach: items"> <li data-bind="css: {'accordion-open': $data === $parent.openItem()}, click: $parent.openItem"> <div class="header" data-bind="text: header"></div> <div class="content" data-bind="text: content"></div> </li> </ul> 

如果愿意，您可以使用CSS动画淘汰自己。