1

2 レベルのメニューを作成しているので、トップメニュー項目をクリックするとサブメニューが表示され、サブメニュー自体ではなくページの他の場所をクリックすると、サブメニューが非表示になります。body タグにクリック バインドを追加するつもりはありません。いずれにせよ機能しませんが、これを実現するにはどうすればよいでしょうか。これまでの私のコードは次のとおりです。

<div id="menuholder">
<ul id="topmenu">
    <li  data-bind="click: showMenu.bind($data, 1)">top menu item</li>
    <ul class="submenu" data-bind="visible: selected() == '1'">
         <li><a href="#">submenu item</a></li>
    </ul>
</ul>
</div>
<script type="text/javascript">
var menuModel = function () {
    var self = this;
    self.selected = ko.observable(0);
    self.showMenu = function (data) {
        var s = self.selected();
        if (s > 0 && data == s)
            self.selected(0);
        else
            self.selected(data);
    };
    self.hideMenu = function () {
        self.selected(0);
    }
}
ko.applyBindings(new menuModel(), document.getElementById("menuHolder"));

4

2 に答える 2

1

Twitter Bootstrapがドロップダウンを行う方法を確認すると、html要素にイベントが追加されます。

ドロップダウン クラス定義の内部:

...
  $('html').on('click.dropdown.data-api', function () {
      $el.parent().removeClass('open')
  })

同様のことを試すことができます。

于 2013-02-28T23:12:36.150 に答える
0 
$('yourParentDivId').click(function(e) {  
    if (!( $(e.target).is('topmenu') && $(e.target).is('submenu') ) ) {  
        alert('clicked');  
        self.hideMenu();
    }  
});

ここを参照 ノックアウト デリゲート イベント

于 2013-03-01T03:01:18.550 に答える