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 サイトへのリンクを次に示します。
なぜ彼らが衝突しているのか、私にはよくわかりません。
どんな助けでも大いに役に立ちます。