在一个div上运行rb_menu()

Question

无论选择了三个选项中的哪一个，都会显示并重叠所有子菜单。突出显示的是工作、服务、联系和全部，而不是鼠标悬停在其上的选项

有没有办法只显示使用CSS选择的子菜单，而隐藏其余的，直到单击其他菜单？

你能用一个例子来说明我如何使用所提供的代码来做到这一点：

Javascript

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


<div id="menu-wrapper">
<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:mick@ogormanconstruction.co.uk">mick@ogormanconstruction.co.uk</a><br />+44(0) 1234 567 890<br /><br />Barry O'Gorman<br /><a href="mailto:barry@ogormanconstruction.co.uk">barry@ogormanconstruction.co.uk</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>
</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;
}

Answer 1

看起来你的css样式在你页面的某处被覆盖了。我已经设置了一个示例页面供您尝试-这对我来说是有效的。

在文档的head中包含以下代码：

<link rel="stylesheet" type="text/css" href="http://www.getintothis.com/pub/projects/rb_menu/css/rb_menu.css" media="screen,projection" />

<style type="text/css">
#menu-wrapper {
    border: 1px solid #bcd;
    background: #fbfbfb;
    padding: 12px;
    overflow: hidden;
    width: 540px;
    height: 320px;
    position: relative;
}
.menu {
    margin-bottom: 10px;
}
.toggle {
    padding: 6px;
    margin-bottom: 2px;
    font-size: 12pt !important;
}
.items {
    margin-left: 46px;
}
.items li a {
    padding: 2px;
}
</style>

<script type="text/javascript" src="http://www.ogormanconstruction.co.uk/wp-content/themes/child/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.ogormanconstruction.co.uk/wp-content/themes/child/scripts/jquery.ui-1.7.min.js"></script>
<script type="text/javascript" src="http://www.ogormanconstruction.co.uk/wp-content/themes/child/scripts/rb_menu.js"></script>

<script>
$(document).ready(function(){

    $('#menu1').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: true, transition: 'swing'});
    $('#menu2').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: true, transition: 'swing'});
    $('#menu3').rb_menu({triggerEvent: 'click', hideOnLoad: true, loadHideDelay: 0, autoHide: true, transition: 'swing'});

});</script>

然后在主体中添加以下内容

<div id="menu-wrapper">
<div id="menu1" class="menu clearfix">
  <div class="toggle">Work&#187;</div>
  <div class="items" style="display: none; ">
    <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&#187;</div>
  <div class="items" style="display: none; ">
    <ul>
      <li>Mick O'Gorman<br /><a href="mailto:mick@ogormanconstruction.co.uk">mick@ogormanconstruction.co.uk</a><br />+44(0) 1234 567 890<br /><br />Barry O'Gorman<br /><a href="mailto:barry@ogormanconstruction.co.uk">barry@ogormanconstruction.co.uk</a><br />+44(0) 7515 569 086</li>
    </ul>
  </div>
</div>

<div id="menu3" class="menu clearfix">
  <div class="toggle">Services&#187;</div>
  <div class="items" style="display: none; ">
    <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><!--End menu3--></div><!--End menu-wrapper-->

我希望这能有所帮助！:)