[英]jQuery show/hide options from one select drop down doesn't work, when option on other drop down is selected
[英]When one drop-down option opens, the other one closes
我的菜單中有兩個下拉選項。 當前,單擊鏈接時,它們都會下拉和向上。 但是我需要的是,當單擊一個鏈接而另一個鏈接處於打開狀態時,打開選項將返回。
HTML:
<ul class="navmenu">
<li><div class="menutop menutop-closed"><a href="#"> MODELS</a></div>
<ul class="submenu" style="display: none; ">
<li><a href="/models/browse/male/main-board">+ MAIN BOARD</a></li>
<li><a href="/models/browse/male/new-faces">+ NEW FACES</a></li>
<li><a href="/models/browse/both/special-booking">+ SPECIAL BOOKING</a></li>
<li><a href="casting">+ CASTING PACKAGE</a></li>
<li><a href="casting">+ SHOW PACKAGE AW11</a></li>
<li><a href="/covers">+ COVERS & CAMPAIGNS</a></li>
</ul>
</li>
</ul>
JavaScript:
$(document).ready(function() {
$('.toggle:not(.toggle-open)') .addClass('toggle-closed') .parents('li') .children('ul') .hide();
$('.menutop:not(.menutop-open)') .addClass('menutop-closed') .parents('li') .children('ul') .hide();
if($.browser.msie){
$('.ul li:last-child .menutop') .css('border-bottom','1px solid #CCC');
}
$('.toggle') .click(function(){
if ($(this) .hasClass('toggle-open')) {
$(this) .removeClass('toggle-open') .addClass('toggle-closed') .empty('') .append('+') .parents('li') .children('ul') .slideUp(250);
$(this) .parent('.menutop') .removeClass('menutop-open') .addClass('menutop-closed');
}else{
$(this) .parent('.menutop') .removeClass('menutop-closed') .addClass('menutop-open');
$(this) .removeClass('toggle-closed') .addClass('toggle-open') .empty('') .append('–') .parents('li') .children('ul') .slideDown(250);
}
})
$('.menutop') .click(function(){
if ($(this) .hasClass('menutop-open')) {
$(this) .removeClass('menutop-open') .addClass('menutop-closed') .parents('li') .children('ul') .slideUp(250);
$(this) .parent('.navmenu') .removeClass('navmenu-open') .addClass('navmenu-closed');
}else{
$(this) .parent('.navmenu') .removeClass('navmenu-closed') .addClass('navmenu-open');
$(this) .removeClass('menutop-closed') .addClass('menutop-open') .parents('li') .children('ul') .slideDown(250);
}
})
})
任何幫助將不勝感激:)
我看到您為切換的下拉菜單提供了新的類。 通過修改第二個點擊處理程序,使用它來關閉所有打開的下拉菜單:
$('.menutop') .click(function(){
if ($(this).hasClass('menutop-open')) {
$(this).removeClass('menutop-open').addClass('menutop-closed').parents('li').children('ul').slideUp(250);
$(this).parent('.navmenu').removeClass('navmenu-open').addClass('navmenu-closed');
}
else {
/* the following will take the element with the menutop-open class (if there is one) and hide it */
$('.menutop-open').removeClass('menutop-open').addClass('menutop-closed').parents('li').children('ul').slideUp(250);
$('.menutop-open').parent('.navmenu').removeClass('navmenu-open').addClass('navmenu-closed');
$(this).parent('.navmenu').removeClass('navmenu-closed').addClass('navmenu-open');
$(this).removeClass('menutop-closed').addClass('menutop-open').parents('li').children('ul') .slideDown(250);
}
})
示例: 演示
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.