更改引导程序切换按钮的状态

Question

我有一个按钮：

<button type="button" class="btn btn-sm btn-primary" data-bind="attr: { 'data-target': '#MoreOptions' + Provider() }" data-toggle="collapse">More Options</button>

控制该div打开或关闭以显示“更多选项”的时间。

<div class="panel-collapse" data-bind="attr: { id: 'MoreOptions' + Provider() }, css: { collapse: $root.IsCollapsed }">---</div>

当数据在div中刷新时，我使用可观察的Knockout.js使其保持打开状态。 我不想刷新数据来折叠div。 问题是当我这样做并保持div打开时，按钮认为div已关闭。 因此，下次用户单击该按钮时，该div会快速关闭并再次打开，需要两次单击该按钮才能使div关闭。

预期的行为是在数据刷新期间使div保持打开状态，但是使按钮知道div处于打开状态，并且只需单击一下即可将其关闭。

我已经在div中使用击倒设置了CSS折叠，我正在寻找一种类似的方法来设置按钮以使其知道div没有折叠。

我注意到，当单击按钮以扩展div时，aria-expanded属性设置为true（在最初呈现按钮时不存在该属性的地方）； 当单击按钮以折叠div时，会将CSS属性“ collapsed”添加到按钮。 我一直在尝试通过淘汰赛添加和更改这些方法，但没有成功。

应当注意的是，按钮是用数据刷新的。

Answer 1

我决定删除引导程序切换按钮功能，而仅将jQuery切换器与剔除结合使用。 jQuery方式仅提供更多控制。

<button type="button" class="btn btn-sm btn-primary" 
        data-bind="click: $root.ChangeMoreOptions">
    More Options
</button>

<div id="MoreOptionsDiv" style="padding-top: 10px; display: none;">
--- content ---
</div>

昏死：

 //Open or close div
 self.ChangeMoreOptions = function () {
     if (self.IsCollapsed() === true) {
         $('#MoreOptionsDiv').slideToggle('slow', function () {
             // Animation complete.
         });
         self.IsCollapsed(false);
     } else {
         $('#MoreOptionsDiv').slideToggle('slow', function () {
             // Animation complete.
         });
         self.IsCollapsed(true);
     }
 }

 //Keep div open on refresh if it is already open
 //Search for 'none' in the style display: none
 self.FixMoreOptions = function () {
     if (($('#MoreOptionsDiv').attr('style').search('none') > -1) 
        && (self.IsCollapsed() === false)) {
         //Toggle closed div back to open
         $('#MoreOptionsDiv').slideToggle('slow', function () {
             // Animation complete.
         });
     }
 }