1

Foundation 3 を使用しているときに、Fancy Box ライトボックスの JavaScript を使用すると、上部のナビゲーション ドロップダウンが表示されないという JavaScript の衝突があることがわかりました。Fancy Box JavaScript を使用してギャラリー ページに画像を表示しましたが、このページでナビゲーション ドロップダウンが機能しません。

これは、Foundation がナビゲーション用に提供する JavaScript です。

    ;(function ($, window, undefined) {
  'use strict';

  $.fn.foundationNavigation = function (options) {

    var lockNavBar = false;
    // Windows Phone, sadly, does not register touch events :(
    if (Modernizr.touch || navigator.userAgent.match(/Windows Phone/i)) {
      $(document).on('click.fndtn touchstart.fndtn', '.nav-bar a.flyout-toggle', function (e) {
        e.preventDefault();
        var flyout = $(this).siblings('.flyout').first();
        if (lockNavBar === false) {
          $('.nav-bar .flyout').not(flyout).slideUp(500);
          flyout.slideToggle(500, function () {
            lockNavBar = false;
          });
        }
        lockNavBar = true;
      });
      $('.nav-bar>li.has-flyout', this).addClass('is-touch');
    } else {
      $('.nav-bar>li.has-flyout', this).on('mouseenter mouseleave', function (e) {
        if (e.type == 'mouseenter') {
          $('.nav-bar').find('.flyout').hide();
          $(this).children('.flyout').show();
        }

        if (e.type == 'mouseleave') {
          var flyout = $(this).children('.flyout'),
              inputs = flyout.find('input'),
              hasFocus = function (inputs) {
                var focus;
                if (inputs.length > 0) {
                  inputs.each(function () {
                    if ($(this).is(":focus")) {
                      focus = true;
                    }
                  });
                  return focus;
                }

                return false;
              };

          if (!hasFocus(inputs)) {
            $(this).children('.flyout').hide();
          }
        }

      });
    }

  };

})( jQuery, this );

ここに JavaScript を投稿できないため、fancybox の Web サイトへのリンクを次に示します。

Fancybox の Web サイト

なぜ彼らが衝突しているのか、私にはよくわかりません。

どんな助けでも大いに役に立ちます。

4

0 に答える 0