Javascript 可折叠面板，带自举和顶出装置

我不能用KnockoutJS和Bootstrap制作手风琴来正常工作。我是这样定义的：

<div class="panel-group" id="accordion" data-bind="foreach: Advertisers()">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <span data-toggle="collapse" data-bind="html: $data, attr: { 'data-target': '#' + $data }"></span>
            </h4>
        </div>
    </div>
    <div class="panel-collapse collapse" data-parent="#accordion" data-bind="attr: { id: $data }">
        <div class="panel-body">
             ...content...

…内容。。。

“广告商”是一个可观察的字符串数组，因此$data是一个字符串。每个广告商我都有一排

所有行最初都会折叠，单击一行将展开下面的内容。到目前为止还不错

问题是，当我单击另一行时，我希望前一行会崩溃，但事实并非如此。（使用Bootstrap和KnockoutJS，我也不能做小提琴来工作…）

---

编辑了代码。

一个简单的自定义绑定如何，它还允许您稍微整理一下视图：

ko.bindingHandlers.bootstrapAccordion = {
  init: function(elem, value, allBindings) {
    var options = ko.utils.unwrapObservable(value()),
        handleClass = '[data-toggle]',
        contentClass = '.collapse',
        openItem = ko.utils.unwrapObservable(options.openItem) || false,
        itemClass = '.' + ko.utils.unwrapObservable(options.item) || '.accordion-group',
        items = $(elem).find(contentClass);

    // toggle: false required to hide items on load
    items.collapse({ parent: elem, toggle: false });
    if (openItem > -1) items.eq(openItem).collapse('show');

    // if the array is dynamic, the collapse should be re-initiated to work properly
    var list = allBindings.get('foreach');
    if (ko.isObservable(list)) {
      list.subscribe(function() { 
        $(elem).find(contentClass).collapse({ parent: elem, toggle: false });              
      });
    }

    $(elem).on('click', handleClass, function() {
        $(elem).find(contentClass).collapse('hide');
        $(this).closest(itemClass).find(contentClass).collapse('show');
    });
  }
};

此绑定采用2个参数（容器的类名称，以及可选的加载时打开的项），例如：

bootstrapAccordion:{item:'panel group'，openItem:0}

，并且应在具有

foreach

绑定的同一元素上设置。它假定可折叠部分有一个

collapse

类，用于切换它们的句柄有一个

data toggle

属性

请在此处查看它的实际操作：

---

我扩展了Tyblitz上面的示例，包括对更改图标（例如+/-，向上/向下箭头）的支持，以及通过将数据“打开下一个”属性应用于单击时应移动到下一个面板的对象来移动到下一个面板的支持

ko.bindingHandlers.bootstrapAccordion = {
    init: function (elem, value, allBindings) {
        var options = ko.utils.unwrapObservable(value()),
            handleClass = '[data-toggle]',
            contentClass = '.collapse',
            openedClass = ko.utils.unwrapObservable(options.openedClass) || 'fa-minus',
            closedClass = ko.utils.unwrapObservable(options.closedClass) || 'fa-plus',
            openCloseToggleClasses = openedClass + ' ' + closedClass,
            openItem = ko.utils.unwrapObservable(options.openItem) || false,
            itemClass = '.' + (ko.utils.unwrapObservable(options.item) || 'accordion-group'),
            items = $(elem).find(contentClass);

        var initializeItems = function(items) {
            // toggle: false required to hide items on load
            items.collapse({ parent: elem, toggle: false });
            if (openItem > -1) {
                items.eq(openItem).collapse('show');
                items.eq(openItem).closest(itemClass).find('.panel-heading').find('i').toggleClass(openCloseToggleClasses);
                items.eq(openItem).closest(itemClass).find('.panel-heading').addClass('active');
            }
        }

        initializeItems(items);

        // if the array is dynamic, the collapse should be re-initiated to work properly
        var list = allBindings.get('foreach');
        if (ko.isObservable(list)) {
            list.subscribe(function () {
                initializeItems($(elem).find(contentClass));
            });
        }

        $(elem).on('click', handleClass, function () {
            $(elem).find(contentClass).collapse('hide');
            $(this).closest(itemClass).find(contentClass).collapse('show');
            $(this).closest(itemClass).parent().find('.panel-heading i').removeClass(openCloseToggleClasses);
            $(this).closest(itemClass).parent().find('.panel-heading i').addClass(closedClass);
            $(this).closest(itemClass).parent().find('.panel-heading').removeClass('active');
            if ($(this).closest(itemClass).find('.panel-collapse').attr('aria-expanded') === "true") {
                $(this).closest(itemClass).find('.panel-heading i').toggleClass(openCloseToggleClasses);
                $(this).closest(itemClass).find('.panel-heading').addClass('active');
            }
        });

        $(elem).on('click', '[data-open-next]', function () {
            $next = $(this).closest(itemClass).next(itemClass).find(handleClass);
            if ($next.length) {
                $next.click();
            } else {
                $same = $(this).closest(itemClass).find(contentClass);
                $same.collapse('hide');
                $same.parent().find('.panel-heading i').removeClass(openCloseToggleClasses);
                $same.parent().find('.panel-heading i').addClass(closedClass);
                $same.parent().find('.panel-heading').removeClass('active');
            }
        });
    }
};

要与此绑定一起使用的标记示例：

<div data-bind="foreach: listOfThings, bootstrapAccordion: { openItem: 0 }">
    <div class="accordion-group">
        <div class="panel panel-default" style="cursor: pointer;" data-toggle>
            <div class="panel-heading">
                <i class="fa fa-plus fa-pull-left fa-2x"></i>
                <h3 data-bind="text: name">Title of expander</h3>
            </div>
        </div>
        <div class="panel-collapse collapse">
            <div class="panel-body">
                <div class="clearfix" data-accordion-content>
                <!-- content goes here -->

                <!-- ko if: $index() < $parent.listOfThings().length -1 -->
                <button data-open-next>Next Thing</button>
                <!-- /ko -->
                </div>
            </div>
        </div>
    </div>
</div>

扩展器名称
下一件事

---

如果没有回馈，我会很难过：）

我希望我们能为手风琴做一个更容易处理的定制装订。。。你能检查一下手风琴样品是否适合你吗？你知道吗？有助于弥合引导和knockout@burktelefon我做了很多这方面的工作&我在这里回答了一个这样的问题。这应该会有帮助。ps：尝试使用

$index

而不是

$data

应该是唯一的选择，也可以尝试

attr:{'href'：'#'+$data}“

而不是

attr:{'data target'：'#'+$data}”

并告诉我们，然后我相信这是css的一个小问题，你需要研究一下。代码方面的所有内容都已就绪。itemClass默认值不正确。请将该行更新为：itemClass='.+（ko.utils.unwrapObservable（options.item）| |'accordion group'），另一个简单的解决方案在这里。。不知道作者是谁