1

Zurb Foundation 4 で構築された Web アプリケーションに取り組んでいましたが、他の誰も経験していないように見える小さな問題に遭遇しました。私は完璧に動作する標準のトップバーの実装を使用しています...

<ul class="left">
  <li><a href="/pageone" class="ajax_go">Page One</a></li>
  <li class="divider"></li>
  <li class="has-dropdown"><a href="#">More...</a>
    <ul class="dropdown">
      <li><a class="ajax_go" href="/pagetwo">Page Two</a></li>
    </ul>
  </li>
</ul>

この関数を使用して ajax 経由でコンテンツをロードする ajax_go ハンドラを作成しました...

$(document).on("click", ".ajax_go", function(e){
    e.preventDefault();
    var page_name = $(this).attr('href');
    $.ajax({
        url: page_name + '?ajax=1',
        success: function(result){
            $('#content').html(result);
            $(document).foundation('section','reflow');
        }
    });
    if(page_name!=window.location){
        window.history.pushState({path:page_name},'',page_name);
    }
    return false;
});

現在、トップレベルのリンクには問題はありませんが、ドロップダウン項目では関数が失敗します。「ページ 1」をクリックすると意図したとおりに機能しますが、「ページ 2」をクリックすると、新しいページをロードするデフォルトのアクションに戻ります。foundation.topbar.js から何を削除すればよいかわかりませんでしたが、いくつかの JavaScript がドロップダウン リンクに影響を与えていると思います。

ページをモバイル幅で読み込むと、毎回失敗します。

4

0 に答える 0