5

各項目が独自のサブメニューを切り替えるメニューがあります。サンプルコードは次のとおりです。ご覧のとおり、サブメニュー項目は google.co.nz にリンクするタグです

  <ul id="menuHolder">
    <li data-bind="click: showMenu.bind($data, 1)"> 
         Main menu item
        <ul class="submenu" data-bind="visible: selected() == '1'">
            <li>
               <a class="sub-item" href="http://google.co.nz">
                    Submenu item
               </a>
             </li>
        </ul>
    </li>
 </ul>
<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);
    };     
}
ko.applyBindings(new menuModel(), document.getElementById("menuHolder"));
</script>

すべてが機能しますが、タグだけが機能しなくなりました。何が問題なのですか?

4

1 に答える 1

8

問題は次のとおりです。リンクをクリックすると、クリックイベントが発生し、showMenu関数によって処理されます。デフォルトでは、KO はブラウザーのデフォルトの動作をトリガーしないため、リンクは開きません。

必要なのは、これを返すクリック イベント ハンドラーをリンクに追加することです。KO にブラウザーの既定の動作をトリガーするように指示します。また、実行を防ぐためにプロパティをtrueに設定する必要がある場合もあります。clickBubblefalseshowMenu

<a class="sub-item" href="http://google.co.nz"
   data-bind="click: function(){ return true }, clickBubble: false" >
      Submenu item
</a>

ドキュメントでクリック バインディングの詳細を読むことができます。

JSFiddle のデモ。

于 2013-03-13T08:53:56.457 に答える