7

私は単一ページ サイトで Zurb Foundation の固定トップバーを使用しており、ページ内の場所へのアンカー リンクが含まれています。展開されたモバイル メニュー内のリンクがクリックされるたびに、メニューが閉じられるようにしたいと考えています。

現在、リンクをクリックするとページがスクロールしますが、メニューはページの上部に表示されずに開いたままになります。

以前のバージョンの Foundation では、コードをリバース エンジニアリングして簡単な解決策を見つけることができました。トップバーの別の問題を修正するために 4.3.1 にアップデートして以来、JavaScript に関する知識が限られているため、解決策を見つけることができません。

トップバー

メニューのリンクがクリックされたときにメニューを閉じるためのイベントまたは関数を起動できれば、修正されるように思えます。以前、リンク クリックで発生したコードを 261 行目に配置しました。

モバイル メニューが閉じると、トップバーを囲む div に .fixed が追加され、.topbar div から .expanded と .fixed が削除されます。

4

6 に答える 6

3

試す：

$('#main-menu li').click(function() {
    $('.toggle-topbar').trigger('click');
});
于 2013-08-30T00:15:01.980 に答える
2

初めて Foundation 6 を使用しています。リンクがクリックされたときにモバイルの新しいトップバー メニューを閉じる方法を見つけようとしているときに、この投稿に出くわしました。Foundation 6 に取り組んでいる他の誰かがこの投稿に出くわした場合に備えて、私の解決策についてコメントしたいと思いました。

これが私がしたことです：

ナビゲーション設定 - 中規模および大規模なブレークポイントでは水平ナビゲーション、小規模なブレークポイントではレスポンシブ トグル垂直ナビゲーション

                <!--  Mobile responsive toggle (hamburger menu) -->
                <div class="title-bar" data-responsive-toggle="siteNav" data-hide-for="medium">
                    <button class="menu-icon" type="button" data-toggle></button>
                    <div class="title-bar-title">Menu</div>
                </div>

                <!-- Nav items -->
                <div id="siteNav" class="top-bar"> 
                    <p><ul class="vertical medium-horizontal menu text-center">
                        <li ><a href="#home" onClick="">HOME</a></li>
                        <li ><a href="#services">SERVICES</a></li>
                        <li ><a href="#contact">CONTACT</a></li>
                    </ul></p>
                </div>

次に、この投稿の以前のソリューションに基づいて、jquery の修正バージョンを追加しました (awesomeBastard と Cerbrus に感謝します)。

$(document).ready(function($) {
        $('#siteNav li').click(function() { 
            if(Foundation.MediaQuery.current == 'small'){
                $('#siteNav').css('display', 'none'); 
            }
        });
    });

Foundation 6 では、css セレクター「display」が展開されたメニューに追加され、非表示の場合は「display:none」、展開された場合は「display:block」に設定されます。この jquery スニペットは、私が使用しているデフォルト メニュー クラスのナビゲーション項目をクリックすると、現在のブレークポイントを小さい (モバイル デバイス) に対してチェックし、true の場合は css セレクターを「display:none」に変更し、メニュー トグルを効果的に閉じます。

于 2016-01-28T01:43:12.790 に答える
1

よりクリーンな方法（トリガークリックまたはクラスの削除の代わりに）：

 $(document).on("click", ".top-bar li", function () {
     Foundation.libs.topbar.toggle($('.top-bar'));
 });
于 2014-03-28T02:04:10.807 に答える
0

これは私のために働くものです：

setTimeout(function() {$(document).foundation('topbar', 'reflow')}, 500);

これもうまくいくかどうか教えてください。(おそらく、「500」も 0.5 秒よりも短い時間に減らしてください)。

拡張バージョンは次のとおりです。

<script type="text/javascript">
function hideDropDown() {
  setTimeout(function() {$(document).foundation('topbar', 'reflow')}, 500);
}
</script>
<nav class="top-bar" data-topbar role="navigation">
  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="has-dropdown">
        <a href="#">My menu</a>
        <ul class="dropdown">
          <li><a onclick="hideDropDown()" target="another_page" href="/some/where">Menu item</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>
于 2015-01-11T07:14:00.457 に答える
0

Foundation 6 ドロップダウンの close 関数のコードの一部をコピーしました。

それを機能させるには、オプションdata-disable-hover="trueをメニュー要素に設定する必要もありました。そうしないと、ユーザーが最初に要素をクリックしたときにメニューが閉じません。

私は AngularJS でコードを書き、それを機能させました。jQueryの場合はこのようになると思います。つまり、コードはテストされません。

$('#main-menu li').click(function closeDropdown() {
     var $toClose = $('#main-menu');

     if(!$toClose){
        return;
     }

     var somethingToClose = $toClose.hasClass('is-active') || $toClose.find('.is-active').length > 0;

     if (somethingToClose) {
        $toClose.find('li.is-active').add($toClose).attr({
           'aria-expanded': false,
           'data-is-click': false
        }).removeClass('is-active');

        $toClose.find('ul.js-dropdown-active').attr({
           'aria-hidden': true
        }).removeClass('js-dropdown-active');
     }
  });
于 2016-08-28T12:02:55.357 に答える