我有大部分工作 - 单击标题（例如，Business Jet Traveler）时，这些部分会展开。我正在努力解决的是 - 当您展开不同的部分时，然后单击其中一个子链接，我希望 OTHER 部分 - 您刚刚所在的部分 - 折叠并变为非活动状态（没有浅色背景） . 这有意义吗？
http://jsfiddle.net/velcrobots/B6d35/
我正在尝试使用最接近（）和兄弟姐妹（），但我想我错过了一些东西。有任何想法吗？
HTML：
<div id="mk-menu">
<div class="mk-ribbon"></div>
<h1><?php print $yr; ?><br/>Media Kits</h1>
<h2>Advertise With AIN</h2>
<div><!-- wrapper to separate menu items for jquery -->
<div class="mk-menu-item">
<a class="menu-head" id="ain-menu">Aviation International News</a>
<ul id="ain-menu-sub" class="mk-submenu">
<li><a href="#" name="ain-cal">Calendar</a></li>
<li><a href="#" name="ain-rates">Print Rates</a></li>
<li><a href="#" name="ain-orates">Online Rates</a></li>
<li><a href="#" name="ain-specs">Print Specs</a></li>
<li><a href="#" name="ain-ospecs">Online Specs</a></li>
</ul>
</div>
<div class="mk-menu-item">
<a class="menu-head" id="bjt-menu">Business Jet Traveler</a>
<ul id="bjt-menu-sub" class="mk-submenu">
<li><a href="#" name="bjt-cal">Calendar</a></li>
<li><a href="#" name="bjt-rates">Print Rates</a></li>
<li><a href="#" name="bjt-orates">Online Rates</a></li>
<li><a href="#" name="bjt-specs">Print Specs</a></li>
<li><a href="#" name="bjt-ospecs">Online Specs</a></li>
</ul>
</div>
<div class="mk-menu-item">
<a class="menu-head" id="cnd-menu">Convention News<br/>Daily Editions</a>
<ul id="cnd-menu-sub" class="mk-submenu">
<li><a href="#" name="cnd-cal">Calendar</a></li>
<li><a href="#" name="cnd-rates">Print Rates</a></li>
<li><a href="#" name="cnd-orates">Online Rates</a></li>
<li><a href="#" name="cnd-specs">Print Specs</a></li>
<li><a href="#" name="cnd-ospecs">Online Specs</a></li>
</ul>
</div>
<div class="mk-menu-item">
<a class="menu-head" id="and-menu">Airshow News<br/>Daily Editions</a>
<ul id="and-menu-sub" class="mk-submenu">
<li><a href="#" name="and-cal">Calendar</a></li>
<li><a href="#" name="and-rates">Print Rates</a></li>
<li><a href="#" name="and-orates">Online Rates</a></li>
<li><a href="#" name="and-specs">Print Specs</a></li>
<li><a href="#" name="and-ospecs">Online Specs</a></li>
</ul>
</div>
<div class="mk-menu-item">
<a class="menu-head" id="enews-menu">Emailed Newsletters</a>
<ul id="enews-menu-sub" class="mk-submenu">
<li><a href="#" name="enews-rates">Rates</a></li>
<li><a href="#" name="enews-specs">Specs</a></li>
</ul>
</div>
</div><!-- end wrapper div to separate for jquery -->
<div class="mk-ribbon-end"></div>
</div><!-- end #mk-menu -->
CSS：
#mk-menu {color:#FFF; background:#556B80; float: left; margin-top: -39px; position: relative; width: 204px; font-family: Verdana,Geneva,sans-serif; padding-bottom:20px}
.mk-ribbon {height:18px; width:25px; background:url(http://www.ainonline.com/sites/all/themes/ain_core/images/mk-ribbon.png) no-repeat; position:absolute; right:-25px}
.mk-ribbon-end {width:204px; height:51px; background:url(http://www.ainonline.com/sites/all/themes/ain_core/images/mk-ribbon-end.png) no-repeat; position:absolute; bottom:-51px}
#mk-menu h1 {font-family: Georgia, "Times New Roman", Times, serif;border-bottom: 1px solid #FFF; font-size: 25px; font-weight: bold; line-height: 32px; margin: 40px 15px 0; text-align: center; text-transform: uppercase;}
#mk-menu h2 {font-family: Georgia, "Times New Roman", Times, serif;font-size: 12px; margin: 6px 0 35px; text-align: center; text-transform: uppercase;}
a.menu-head {color: #FFF; display: block; font-size: 10px; margin: 10px 5px 0; padding: 5px; text-transform: uppercase; line-height:12px}
a.mk-selected, a.menu-head:hover {background: #6E8193; line-height:12px}
a.menu-head:hover {cursor:pointer; color:#FFF !important}
#mk-menu ul {font-size: 14px; margin: 10px 0 15px 60px;}
#mk-menu li {font-size: 12px; line-height: 16px;}
#mk-menu li a {color:#FFF; text-decoration:none}
#mk-menu li:hover, #mk-menu li a:hover, #mk-menu li.active {list-style:disc; font-weight:bold; color:#FFF !important}
.mk-submenu {display:none}
jQuery：
jQuery(document).ready(function(){
jQuery(".menu-head").click(function (a) {
var myid = jQuery(this).attr("id");
jQuery("#"+myid+"-sub").slideToggle(100);
jQuery(this).toggleClass("mk-selected");
a.preventDefault();
});
jQuery(".mk-submenu li").click(function (b) {
jQuery(".mk-submenu li").removeClass("active");
jQuery(this).addClass("active");
b.preventDefault();
});
jQuery(".mk-submenu li a").click(function (c) {
jQuery(this).closest(".mk-menu-item").siblings().removeClass("mk-selected");
var myname = jQuery(this).attr("name");
jQuery(".mk-section").hide();
jQuery("#"+myname).show();
c.preventDefault();
});
});