的Javascript子菜單重疊

子菜單看起來，如果你選擇「工作」，然後選擇「聯繫」例如的Javascript子菜單重疊

http://www.ogormanconstruction.co.uk/home

重疊有沒有辦法，只顯示已使用CSS選擇子菜單，隱藏其他部分直到另外點擊？

你可以使用我將如何做到這一點使用提供的代碼示例：

的Javascript

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#menu').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false, transition: 'swing'}); 
}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#menu2').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false, transition: 'swing'}); 
}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#services').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: false, transition: 'swing'}); 
}); 
</script> 

<div id="menu" class="menu clearfix"> 
    <div class="toggle">Work</div> 
    <div class="items"> 
    <ul> 
     <li><a href="http://www.ogormanconstruction.co.uk/basingstoke-treatment-works">Basingstoke Treatment Works</a></li> 
     <li><a href="">Project Two</a></li> 
     <li><a href="">Project Three</a></li> 
     <li><a href="">Project Four</a></li> 
     <li><a href="">Project Five</a></li> 
     <li><a href="">Project Six</a></li> 
    </ul> 
</div> 
</div> 

<div id="menu2" class="menu clearfix"> 
    <div class="toggle">Contact</div> 
    <div class="items"> 
    <ul> 
     <li>Mick O'Gorman<br /><a href="mailto:[email protected]">[email protected]</a><br />+44(0) 1234 567 890<br /><br />Barry O'Gorman<br /><a href="mailto:[email protected]">[email protected]</a><br />+44(0) 7515 569 086</li> 
    </ul> 
</div> 
</div> 

<div id="services" class="menu clearfix"> 
    <div class="toggle">Services</div> 
    <div class="items"> 
    <ul> 
     <li><a href="http://www.ogormanconstruction.co.uk/site-logistics">Site Logistics</a></li> 
     <li><a href="http://www.ogormanconstruction.co.uk/waste-management">Waste Management</a></li> 
     <li><a href="http://www.ogormanconstruction.co.uk/security-services">Security Services</a></li> 
     <li><a href="http://www.ogormanconstruction.co.uk/traffic-management">Traffic Management</a></li> 
     <li><a href="http://www.ogormanconstruction.co.uk/multi-service-gangs">Multi Service Gangs</a></li> 
     <li><a href="http://www.ogormanconstruction.co.uk/facilities">Facilities & Accommodation</a></li> 
     <li><a href="http://www.ogormanconstruction.co.uk/small-works-maintenance">Small Works & Maintenance</a></li> 
     <li><a href="http://www.ogormanconstruction.co.uk/catering-services">Catering Services</a></li> 
    </ul> 
</div> 
</div>

CSS

#menu { 
    position: relative; 
    top: 435px; 
    left: -15px; 
    width: 60px; 
    height: 25px; 
} 

#menu2 { 
    position: relative; 
    top: 445px; 
    left: -15px; 
    width: 60px; 
} 

#services { 
    position: relative; 
    top: 428px; 
    left: -15px; 
    width: 60px; 
} 

.menu .items a:hover { 
    text-decoration: none; 
} 

.menu .items a { 
    font-size: 11px; 
    color: #ABA099; 
    text-decoration: none; 
} 

.menu .items { 
    left: 180px; 
    width: 250px !important; 
} 

.menu .items li { 
    width: 250px; 
    line-height: 19px; 
    font-size: 11px; 
    color: #ABA099; 
    height: 19px; 
} 

.menu .items li a:hover { 
    color: #4D4D4F; 
} 

.menu .toggle { 
    color: #ABA099; 
    font-weight: normal; 
} 

.menu .toggle-hover { 
    color: #4D4D4F; 
}

來源

2012-01-03 user1096057

'rb_menu（）'的代碼在哪裏？ – 2012-01-03 21:56:16

您是否嘗試將autoHide設置爲true？ – glortho 2012-01-03 21:58:27

這就是我提供的所有代碼 – user1096057 2012-01-03 22:04:29

你的插件正在尋找其他.items因此它可以將它們隱藏在您調用插件的菜單中，因此如果您將所有菜單包裝在1格內並運行rb_menu()在那。例如：

$('#menu-wrapper').rb_menu({ 
    triggerEvent: 'click', 
    hideOnLoad: true, 
    loadHideDelay: 0, 
    autoHide: false, 
    transition: 'swing' 
});

來源

2012-01-03 22:04:49 nav

是的，但是您還必須創建該HTML元素，並確保它包裝了您希望應用該插件的所有菜單。 – nav 2012-01-03 22:10:07

我編輯了代碼，但我不確定我所做的是正確的 – user1096057 2012-01-03 22:15:30

您需要將所有菜單包裝在一個包裝中 - atm中，您已將每個菜單包裝在另一個包裝中。 – nav 2012-01-03 22:20:14

的Javascript子菜單重疊

回答

相關問題