これが私がやった方法です。基本的に、任意のクリック イベントで関数を呼び出す必要があり、すべてのメニューについて、そのメニューまたはメニューの子要素のいずれかでイベントが発生しない場合は、メニューの close 関数が呼び出されます。もちろん、閉じる関数は、jQuery のフェード関数を使用する代わりに、class 属性を編集します。ご覧のとおり、「購読」、「私について」、「この Web サイトについて」などのメニューがいくつかあります。これがお役に立てば幸いです。
$(document).ready(function(){
// menu hide/show logic
var TOGGLE_SPEED = 100;
var subscribe_menu = $("#subscribe-container");
var about_me = $("#about-me-container");
var about_this_website = $("#about-this-website-container");
var filter_menu = $("#filter-menu-container");
var img_menu = $("#img-menu-container");
var menuList = [subscribe_menu, about_me, about_this_website, filter_menu, img_menu];
function hideMenu(menu){
menu.fadeOut(TOGGLE_SPEED);
}
function showMenu(menu){
menu.fadeIn(TOGGLE_SPEED);
}
function toggleMenu(menu){
menu.fadeToggle(TOGGLE_SPEED);
}
function hideOthers(e){
for (var i in menuList) {
var menu = menuList[i];
// check to see if the event target is the menu
// or one of its children
if (!menu.is(e.target) && menu.has(e.target).length === 0) { hideMenu(menu); }
};
}
function clickHandler(menu){
var e = $.Event("click");
e.target = menu;
hideOthers(e);
toggleMenu(menu);
}
$(document).click(function(e){
hideOthers(e);
});
$("#subscribe-tab").click(function(){
clickHandler(subscribe_menu);
return false;
});
$("#about-me-tab").click(function(){
clickHandler(about_me);
return false;
});
$("#about-this-website-tab").click(function(){
clickHandler(about_this_website);
return false;
});
$("#filter-tab").click(function(){
clickHandler(filter_menu);
return false;
});
$("#img-menu-button").click(function(){
clickHandler(img_menu);
return false;
});
});