更改引导切换按钮的状态答案

【问题标题】：changing state of bootstrap toggle button更改引导切换按钮的状态
【发布时间】：2018-01-01 20:28:28
【问题描述】：

我有一个按钮：

<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 observable 使其保持打开状态。我不希望数据刷新来折叠 div。问题是当我这样做并保持 div 打开时，按钮认为 div 已关闭。因此，下次用户单击按钮时，div 会快速关闭并再次打开，需要两次单击按钮才能关闭 div。

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

我已经在 div 中设置了带有敲除的 CSS 折叠，我正在寻找一种类似的方法来设置按钮，让它知道 div 没有折叠。

我注意到，当单击按钮展开 div 时，aria-expanded 属性设置为 true，而在最初呈现按钮时它不存在；当点击按钮折叠 div 时，CSS 属性 'collapsed' 被添加到按钮中。我一直在尝试通过淘汰赛添加和更改这些内容，但没有成功。

需要注意的是，按钮是用数据刷新的。

【问题讨论】：

可以不同时刷新按钮吗？您究竟是如何刷新 div 内的数据的？
@JasonSake 使用 Ajax 调用。该按钮使用数据刷新，它是作为刷新目标的部分的一部分。问题是，当按钮被渲染时，它认为 div 已关闭，因为这是 div 在页面加载时应该是这样的，所以它不认为它应该打开。我尝试向按钮添加属性以使其处于“打开”状态，但它似乎不起作用。
您说“按钮已刷新数据”是什么意思？是否有一些 Knockout 绑定来控制按钮的呈现，还是直接操作 DOM？

标签： javascript twitter-bootstrap knockout.js

【解决方案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.
         });
     }
 }

【讨论】：