Javascript 在一个div上运行rb_menu()
无论选择了三个选项[工作、服务、联系]中的哪一个,所有子菜单都会出现并重叠,并且所有子菜单都会高亮显示,而不是鼠标悬停的子菜单 有没有办法只显示使用CSS选择的子菜单,并隐藏其余的子菜单,直到单击其他子菜单 您能否举例说明我将如何使用提供的代码执行此操作: JavascriptJavascript 在一个div上运行rb_menu(),javascript,css,Javascript,Css,无论选择了三个选项[工作、服务、联系]中的哪一个,所有子菜单都会出现并重叠,并且所有子菜单都会高亮显示,而不是鼠标悬停的子菜单 有没有办法只显示使用CSS选择的子菜单,并隐藏其余的子菜单,直到单击其他子菜单 您能否举例说明我将如何使用提供的代码执行此操作: Javascript <script type="text/javascript"> $(document).ready(function(){ $('#menu-wrapper').rb_menu({ triggerEv
<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样式正在页面中的某个位置被覆盖。我已经设置了一个示例页面供您尝试-这对我来说很有用 在文档的标题中包含以下代码:
<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>
#菜单包装器{
边框:1px实心#bcd;
背景:#fbfb;
填充:12px;
溢出:隐藏;
宽度:540px;
高度:320px;
位置:相对位置;
}
.菜单{
边缘底部:10px;
}
.切换{
填充:6px;
边缘底部:2px;
字体大小:12pt!重要;
}
.项目{
左边距:46px;
}
.项目李a{
填充:2px;
}
$(文档).ready(函数(){
$('#menu1').rb_菜单({triggerEvent:'click',hideOnLoad:true,loadHideDelay:0,autoHide:true,transition:'swing'});
$('#menu2').rb_菜单({triggerEvent:'click',hideOnLoad:true,loadHideDelay:0,autoHide:true,transition:'swing'});
$('#menu3').rb_菜单({triggerEvent:'click',hideOnLoad:true,loadHideDelay:0,autoHide:true,transition:'swing'});
});
然后在正文中添加以下内容:
<div id="menu-wrapper">
<div id="menu1" class="menu clearfix">
<div class="toggle">Work»</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»</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»</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-->
工作»;
联系人»;
- 米克·奥戈尔曼
+44(0)1234 567 890
巴里·奥戈尔曼
+44(0)7515 569 086
服务»;
我希望这有帮助!:) 看起来您的css样式正在页面中的某个位置被覆盖。我已经设置了一个示例页面供您尝试-这对我来说很有用 在文档的标题中包含以下代码:
<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>
#菜单包装器{
边框:1px实心#bcd;
背景:#fbfb;
填充:12px;
溢出:隐藏;
宽度:540px;
高度:320px;
位置:相对位置;
}
.菜单{
边缘底部:10px;
}
.切换{
填充:6px;
边缘底部:2px;
字体大小:12pt!重要;
}
.项目{
左边距:46px;
}
.项目李a{
填充:2px;
}
$(文档).ready(函数(){
$('#menu1').rb_菜单({triggerEvent:'click',hideOnLoad:true,loadHideDelay:0,autoHide:true,transition:'swing'});
$('#menu2').rb_菜单({triggerEvent:'click',hideOnLoad:true,loadHideDelay:0,autoHide:true,transition:'swing'});
$('#menu3').rb_菜单({triggerEvent:'click',hideOnLoad:true,loadHideDelay:0,autoHide:true,transition:'swing'});
});
然后在正文中添加以下内容:
<div id="menu-wrapper">
<div id="menu1" class="menu clearfix">
<div class="toggle">Work»</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»</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»</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-->
工作»;
联系人»;
- 米克·奥戈尔曼
+44(0)1234 567 890
巴里·奥戈尔曼
+44(0)7515 569 086
服务»;
我希望这有帮助!:)