Это не идеально, но должно дать вам представление:
jQuery("div.subMenu div").hide();
jQuery("div.mainMenu div.menuItem").mouseleave(function () {
jQuery("div.subMenu div").hide();
}).mouseenter(function () {
var linkText = jQuery("a", this).text();
jQuery("div.subMenu div").each(function (n) {
var hdrText = jQuery("h2", this).text();
if (linkText == hdrText) {
jQuery(this).show();
} else {
jQuery(this).hide();
}
});
});
// update: keep the submenu open
jQuery("div.subMenu div").mouseleave(function () {
jQuery(this).hide();
}).mouseenter(function () {
jQuery(this).show();
});
Я предполагаю, что для каждого пункта меню есть div под subMenu, например.
<div class="subMenu">
<div id="new">
<h2>I'm New</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
<div>
<h2>Ministries</h2>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<h2>Beleifs+Mission</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
</div>
<div>
<h2>Listen</h2>
<p>laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h2>Connect</h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit</p>
</div>
</div>
Пояснение:
- Начните с того, что спрятали все
div внутри subMenu.
-
mouseleave во всех пунктах меню безусловно скрывает все div внутри subMenu, даже если они уже скрыты.
-
mouseenter во всех пунктах меню скрывает все те же div, за исключением того, что показывает элемент с идентичным текстом внутри ссылки пункта меню и заголовком h2 подменю. (Есть определенно лучших способов сделать это, но вам нужен какой-то способ соотнести пункт меню и подменю. Если вы что-то скажете о id, вы можете использовать соглашение об именах, выражающее соединения.)
Обновление: обратите внимание, что происходит много безусловных hide(). Например, подменю исчезнет, когда мышь покинет пункт меню. Чтобы подменю оставалось видимым, когда на нем находится мышь, добавьте обработчики mouseleave и mouseenter для "div.subMenu div". Чтобы избежать мерцания, вам может потребоваться отслеживать состояние каждого подменю.
Обновление 2: я добавил пару строк, чтобы подменю оставалось открытым, пока в нем находится мышь. YMMV на мерцании. Это работает для меня без каких-либо изменений в таблицах (он просто игнорирует их). Тем не менее, подменю div необходимо расположить прямо напротив пункта меню, чтобы мышь могла перемещаться из пункта меню в подменю без его исчезновения. В своем тестовом коде я установил следующее, чтобы убедиться, что он будет работать:
div.mainMenu div.menuItem,
div.subMenu div,
div.subMenu div h2 {
margin-top: 0;
margin-bottom: 0;
}
Если это слишком много сгруппирует текст, вы можете добавить отступ вместо отступа.