は、私がボタンを持って、ブートストラップトグルボタン

Question

の状態を変更します。

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

そして、私は、データがdivの内側にリフレッシュしたときに開くそれを維持するために、観察Knockout.jsを使用しています。私はデータを更新してdivを崩壊させたくありません。問題は私がこれを行い、divを開いたままにするときです。ボタンはdivが閉じていると考えます。したがって、次回ユーザーがボタンをクリックすると、divは本当にすばやく閉じて再び開くようになり、ボタンを2回クリックするだけでdivを閉じることができます。

データの更新中にdivを開いたままにしておき、divが開いていることをボタンに知らせて、ワンクリックで閉じます。

私はdivでknockoutを使って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. 
     }); 
    } 
}