Javascript 更改引导切换按钮的状态

我有一个按钮：

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

---

我使用

Knockout.js

observable在div内刷新数据时将其打开。我不希望数据刷新折叠div。问题是当我这样做并保持div打开时，按钮认为div已关闭。因此，当用户下次单击按钮时，div会快速关闭并再次打开，需要单击两次按钮才能关闭div

预期的行为是在数据刷新期间保持div打开，但让按钮知道div已打开，然后只需单击一次即可将其关闭

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

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

---

需要注意的是，按钮会被数据刷新

我决定删除bootstrap toggle按钮功能，并将jQuery toggle与knockout结合使用。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>

---

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

 //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.
         });
     }
 }