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

最简单的实施：

＆＃13;

def a():
    liA = []
    def b(liA):
        for i in liA:
            i += 1
        liB = generateList()
        for i in liB:
            i -= 1
        liA = liB

    def generateList():
        return [1,2,3,4]

    b(liA)

a()

＆＃13;

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) );

＆＃13;

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;
}

＆＃13;

如果你愿意的话，你可以用CSS动画来解决问题。

Knockout.js：没有jQuery UI的Accordion / collapse元素

1 个答案: