改变自举切换按钮

的状态我有一个按钮：改变自举切换按钮

<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观察到时保留数据的DIV中刷新它打开。我不想要数据刷新来折叠div。问题是，当我这样做，并保持div打开，按钮认为该div是关闭的。因此，下次用户单击该按钮时，div会非常快速地关闭，并再次打开，只需点击两下按钮即可关闭div。

预期的行为是在数据刷新过程中让div保持打开状态，但让按钮知道div是打开的，只需单击一下即可关闭它。

我已经在div中设置了与knockout的CSS折叠，我正在寻找类似的方法来设置按钮，以便知道div未折叠。

我注意到，当点击按钮来展开div时，aria-expanded属性设置为true，当按钮初始渲染时它不存在;当点击按钮折叠div时，CSS属性'collapsed'被添加到按钮。我玩过添加和改变这些通过淘汰赛没有成功。

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

来源

2017-07-26 Barry Franklin

是否有可能无法在同一时间刷新按钮？你究竟如何刷新div中的数据？ –

@JasonSpake通过Ajax调用。按钮IS随数据刷新，它是刷新目标的一部分。问题是，当按钮被渲染时，它认为div是关闭的，因为这是div在页面加载时的样子，所以它不认为它应该打开。我试着给按钮添加属性，使它处于“打开”状态，但它似乎不起作用。 –

当你说“按钮刷新数据”时，你是什么意思？是否有一些Knockout绑定控制着按钮的呈现，还是DOM直接被操纵？ –

我已经决定删除引导切换按钮的功能，只是与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. 
     }); 
    } 
}

来源

2017-07-27 14:24:59

改变自举切换按钮

回答

相关问题