私は自分自身にいくつかの簡単なJQueryを教えて、次のメニューシステムを考え出そうとしています。これは、基本的なネストされたULおよびLIベースのメニューであり、内部ULはJQuery .show（）で表示され、.hide（）で非表示になります。HTMLは次のとおりです。-
<ul id="menu1" class="gtrmenu">
<li><span class="parent"><img class="hidden-bg" src="images/arrow-down.png"/>Single Menu</span>
<ul class="children">
<li><a href="#">Blah blah</a></li>
<li><a href="#">Drivel</a></li>
<li><a href="#">Select something</a></li>
<li><a href="#">Choose me!!</a></li>
</ul>
</li>
</ul>
<ul id="menu2" class="gtrmenu menugroup2">
<li><span id="menu2click" class="parent"><img class="hidden-bg" src="images/arrow-down.png"/>Grouped Menu</span>
<ul class="children">
<li><a href="#">Something here</a></li>
<li><a href="#">More Stuff</a></li>
<li><a href="#">Waffle etc</a></li>
</ul>
</li>
</ul>
<ul id="menu3" class="gtrmenu menugroup2">
<li><span id="menu3click" class="parent"><img class="hidden-bg" src="images/arrow-down.png"/>Search</span>
<ul id="searchX" class="children">
<li>
<form>
<input id="search" type="text" name="firstname">
</form>
</li>
</ul>
</li>
</ul>
<p>The quick brown fox jumps over the lazy dog</p>
JavascriptとJQueryは次のとおりです。-
function gtrMenu(menuID, groupClass, clickElement) {
if (clickElement === undefined) {
clickElement = menuID;
}
$(menuID + ' ul').css("minWidth", $('#menu1').width());
$(clickElement).click(
function() {
if ($(menuID + ' ul.children').is(":hidden")) {
// Close any open menus within the same group.
if (groupClass !== undefined){
$('ul.gtrmenu.' + groupClass + ' li ul.children:visible').not(menuID).closest('ul.gtrmenu').each(function(index){
//console.log(index + " " + $(this).attr("id"));
$(this).find('li .parent img').removeClass('visible-bg').addClass('hidden-bg');
$(this).find('ul.children').hide();
});
}
// Change style of arrow image.
$(menuID + ' li .parent img').removeClass('hidden-bg').addClass('visible-bg');
// Display the submenu
$(menuID + ' ul.children').show();
}
else {
// Revert style of arrow image.
$(menuID + ' li .parent img').removeClass('visible-bg').addClass('hidden-bg');
// Hide the submenu.
$(menuID + ' ul.children').hide();
}
}
);
}
Javascriptは次のように実行されます（上記のHTMLの一部として正しくフォーマットされないため、ここに追加しました）：-
$(document).ready(function () {
gtrMenu("#menu1");
gtrMenu("#menu2", "menugroup2" , "#menu2click");
gtrMenu("#menu3", "menugroup2" , "#menu3click");
});
'Single Menu'（menu1）で示されているように、メニューは単一メニューにすることができます。または、上記の「グループ化されたメニュー」（「検索」でグループ化されます）（menu2およびmenu3）で示されているように、グループ化することもできます。グループ化されたメニューでは、一度に1つしか開くことができません。ユーザーが「グループ化されたメニュー」を開いて「検索」をクリックすると、「グループ化されたメニュー」が閉じます。
私はそれがすべてうまくいくと言うことを非常に誇りに思っています:-)しかし、上のグループ内で開いているメニューを見つけるための私のセレクターは私には非常に長くて面倒に思えます（コメントアウトされたconsole.log行の上の行です）。私の質問は次のとおりです。すでに開いている（閉じることができるように）グループ内のメニューを見つける簡単な方法はありますか？
前もって感謝します。