jQuery/Mootools冲突-铁路超高'；我找不到解决办法
我在使用Mootools和Jquery，我尝试了所有我能想到的解决方案，但都不管用 Mootools用于下拉菜单，jQuery用于库。我以前使用过这个组合，并使用noconflict规则解决了它，但这次似乎没有任何效果 现场演示： 下拉菜单位于主页和公文包链接上 我已经发布了原始代码。我把jQuery改回了$，这样我就可以对一切都有新的了解 问题是下拉菜单可以工作，但它不能按设想的方式工作，应该应用的css样式不能。下拉菜单适用于所有其他没有图库的页面 代码如下：jQuery/Mootools冲突-铁路超高'；我找不到解决办法,jquery,mootools,Jquery,Mootools,我在使用Mootools和Jquery，我尝试了所有我能想到的解决方案，但都不管用 Mootools用于下拉菜单，jQuery用于库。我以前使用过这个组合，并使用noconflict规则解决了它，但这次似乎没有任何效果 现场演示： 下拉菜单位于主页和公文包链接上 我已经发布了原始代码。我把jQuery改回了$，这样我就可以对一切都有新的了解 问题是下拉菜单可以工作，但它不能按设想的方式工作，应该应用的css样式不能。下拉菜单适用于所有其他没有图库的页面 代码如下： <!DOCTYP
<!DOCTYPE html>
<html><!-- InstanceBegin template="/Templates/renee.dwt" codeOutsideHTMLIsLocked="false" --><head>
<meta content="charset=utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Renee Mc Magh Marketing</title>
<!-- InstanceEndEditable -->
<link href="css/reneeMcMagh.css" rel="stylesheet" type="text/css">
<link href="css/MenuMatic.css" rel="stylesheet" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
// BeginOAWidget_Shared_2241022
google.load("mootools", "1.4");
// EndOAWidget_Shared_2241022
</script>
<script src="js/MenuMatic_0.68.3.js" type="text/javascript"></script>
<style type="text/css">
/* BeginOAWidget_Instance_2241022: #nav */
a:link{
color: #FFFFFF;
font-weight: normal;
font-family: "Century Gothic";
font-size: 16px;
text-transform: capitalize;
}
a:visited{
color: #FFFFFF;
font-weight: normal;
font-family: inherit;
font-size: inherit;
}
/* all menu links */
#nav a, #subMenusContainer a{
text-decoration: none;
display: block;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
border: none;
padding-top: 7px;
padding-right: 20px;
padding-bottom: 16px;
padding-left: 20px;
background-color: transparent;
/* [disabled]border-bottom-left-radius: 5px; */
/* [disabled]border-bottom-right-radius: 5px; */
}
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#nav a{
margin:0;
float:left;
}
/* Just sub menu links */
#subMenusContainer a, #nav li li a{
text-align: left;
font-family: "century gothic";
font-size: 14px;
/* [disabled]width: 200px; */
background-color: #56D7FE;
color: #FFF;
}
/* All menu links on hover or focus */
#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
background-color: #321414;
color: #FFFFFF;
}
/* sub menu links on hover or focus */
#subMenusContainer a:hover,
#subMenusContainer a:focus,
#nav a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused,
#nav li a:hover,
#nav li a:focus{
background-color: transparent;
color: #FFFFFF;
}
/* ----[ OLs ULs, LIs, and DIVs ]----*/
/* All ULs and OLs */
#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol {
padding: 0;
margin: 0;
list-style: none;
line-height: 1em;
}
/* All submenu OLs and ULs */
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
/*border around submenu goes here*/
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border: none;
left: 0px;
background-color: #56D7FE;
/* [disabled]width: 210px; */
}
/* List items in main menu --[for non-javascript users this applies to submenus as well] */
#nav li {
/*great place to use a background image as a divider*/
display:block;
list-style:none;
position:relative;
float:left;
}
#subMenusContainer li{
list-style: none;
/* [disabled]padding-top: 7px; */
}
#subMenusContainer li:hover{
background-color: #333333;
}
/* main menu ul or ol elment */
#nav{
display: block;
list-style: none;
z-index: 5;
display: block;
position: relative;
width: 410px;
margin-top: -7px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#subMenusContainer{
display: block;
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 0;
overflow: visible;
z-index: 1000000000;
background-color: #321414;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.smOW{
display: none;
position: absolute;
overflow: hidden;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
/* [disabled]background-color: #56D7FE; */
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: -2px;
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
}
/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
#nav li li{ float:none; }
#nav li li a{ /* Just submenu links*/
position:relative;
float:none;
}
#nav li ul { /* second-level lists */
position: absolute;
width: auto;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top: 2.8em;
}
/* third-and-above-level lists */
#nav li ul ul { margin: -1em 0 0 -1000em; }
#nav li:hover ul ul { margin-left: -1000em; }
/* lists nested under hovered list items */
#nav li:hover ul{ margin-left: 0; }
#nav li li:hover ul { margin-left: 10em; margin-top:-2.5em;}
/* extra positioning rules for limited noscript keyboard accessibility */
#nav li a:focus + ul { margin-left: 0; margin-top:2.2em; }
#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
#nav li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;}
#nav li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;}
#nav li:hover a:focus{ margin-left: 0; }
#nav li li:hover a:focus + ul { margin-left: 10em; }
/* EndOAWidget_Instance_2241022 */
#apDiv1 {
position: absolute;
width: 200px;
height: 115px;
z-index: 6;
}
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2241022" binding="#nav" />
</oa:widgets>
-->
</script>
<script type="text/javascript">
// BeginOAWidget_Instance_2241022: #nav
window.addEvent('domready', function() {
var myMenu = new MenuMatic({
id:"nav",
effect: "slide",
duration: "600",
hideDelay: "1000",
matchWidthMode: "true",
orientation: "horizontal",
direction:{ x: 'right', y: 'down' },
opacity: 95
});
});
// EndOAWidget_Instance_2241022
</script>
<script>
jQuery.noConflict();
</script>
<!-- InstanceBeginEditable name="head" -->
<link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script><!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
<!-- InstanceEndEditable -->
</head>
<body>
<div id="marketing"><img src="images/marketingBranding.png" width="200" height="51"></div>
<div id="Header">
<div id="logo">
<table width="150" border="0" align="right" cellpadding="5" cellspacing="5">
<tr>
<td height="160"><a href="https://www.facebook.com/pages/Renee-McMagh-Marketing/172159979492476" target="new"><img src="images/facebook.png" width="150" height="150"></a></td>
<td><a href="https://twitter.com/ReneeMcMagh" target="new"><img src="images/twitter.png" width="150" height="150"></a></td>
<td><a href="http://www.linkedin.com/pub/renee-mcmagh-taylor/28/8a7/2a0" target="new"><img src="images/linkedin.png" width="150" height="150"></a></td>
</tr>
</table>
</div>
</div>
<div id="navigation">
<div id="navigation_container">
<ul id="nav">
<li><a href="index.html">Home</a>
<ul>
<li><a href="history.html">history/Highlights</a></li>
<li><a href="business.html">business ethos/Principles</a></li>
</ul></li>
<li><a href="services.html">services</a></li>
<li><a href="#">portfolio</a>
<ul>
<li><a href="logo_design.html">Logo Design</a></li>
<li><a href="stationary.html">Brand Pack</a></li>
<li><a href="branding.html">Branding/Marketing</a></li>
<li><a href="website_designs.html">Website Designs</a></li>
</ul> </li>
<li><a href="contact.html">Let's Chat</a></li>
</ul>
</div>
</div>
<div id="breadcrums">You are here: <a href="about.html">Home</a> <img src="img/arrow_right.gif" width="10" height="8"><!-- InstanceBeginEditable name="EditRegion5" -->Portfolio <img src="img/arrow_right.gif" width="10" height="8"><a href="website_designs.html">Web Design</a><!-- InstanceEndEditable --></div>
<div id="content">
<!-- InstanceBeginEditable name="EditRegion3" -->
<h1>Web Design</h1>
<h2> Be on the WORLD WIDE WEB </h2>
<p> </p>
<div>
<!-- Start Advanced Gallery Html Containers -->
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
</li>
<li> <a class="thumb" href="gallery/websites/slides/casavalde.png" title="Casavalde"> <img src="gallery/websites/thumbs/Casavalde.jpg" alt="Casavalde" width="120" height="83" /></a> </li>
<li> <a class="thumb" href="gallery/websites/slides/cemblocks.png" title="Cemblocks"> <img src="gallery/websites/thumbs/Cemblocks.jpg" alt="Cemblocks" width="120" height="83" /></a> </li>
<li> <a class="thumb" href="gallery/websites/slides/cocoon.png" title="Cocoon"> <img src="gallery/websites/thumbs/Cocoon.JPG" alt="Cocoon" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/credit-online.png" title="Credit Online" class="thumb"> <img src="gallery/websites/thumbs/Credit Online.jpg" alt="Credit on line" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/DeWetDeVilliers.png" title="De Wet De Villiers" class="thumb"> <img src="gallery/websites/thumbs/De Wet De Villiers.jpg" alt="De Wet De Villiers" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/edgeSport.png" title="Edge Sport" class="thumb"> <img src="gallery/websites/thumbs/Edge Sport.jpg" alt="Edge Sport" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/embroidereze.png" title="Embroidereze" class="thumb"> <img src="gallery/websites/thumbs/Embroidereze.jpg" alt="Embroiderze" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/FBMining.png" title="FB Mining" class="thumb"> <img src="gallery/websites/thumbs/FB-Mining.JPG" alt="FB Mining" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/foodworx.png" title="Foodworx" class="thumb"> <img src="gallery/websites/thumbs/Foodworx.jpg" alt="Foodworx" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/GreenHabitat.png" title="Green Habitat" class="thumb"> <img src="gallery/websites/thumbs/Green Habitat.jpg" alt="Green Habitat" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/hi-parts.png" title="Hi Parts & Hydraulics" class="thumb"> <img src="gallery/websites/thumbs/Hi Parts & Hydraulics.jpg" alt="Hi Parts & Hydraulics" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/jRaath.png" title="J Raath" class="thumb"> <img src="gallery/websites/thumbs/J-Raath.jpg" alt="J Raath" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/Medi-Care.png" title="Medicare" class="thumb"> <img src="gallery/websites/thumbs/Medicare.JPG" alt="Medicare" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/paramount.png" title="Paramount" class="thumb"> <img src="gallery/websites/thumbs/Paramount.jpg" alt="Paramount" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/NWLitho.png" title="Paramount" class="thumb"> <img src="gallery/websites/thumbs/nwlitho.jpg" alt="Paramount" width="120" height="83" /></a> </li>
<li> <a href="gallery/websites/slides/maricoMeats.png" title="Paramount" class="thumb"> <img src="gallery/websites/thumbs/maricomeats.JPG" alt="Paramount" width="120" height="83" /></a> </li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
<p> </p>
<!-- InstanceEndEditable --></div> <div id="footer_nav"> <div align="right" class="first" id="menu">
<ul>
<li><a href="about.html">Home</a></li>
<li><a href="services.html">services</a></li>
<li><a href="website_designs.html">portfolio</a></li>
<li><a href="contact.html">Let's Chat</a></li>
</ul>
</div></div>
<div id="footer">
<h6>Marketing with Attitude</h6>
<p> Copyright © 2013 Renee McMagh Marketing | All rights reserved</p>
</div>
<!-- InstanceBeginEditable name="footer" -->
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 10,
preloadAhead: 15,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: 'Previous Photo',
nextLinkText: 'Next Photo',
nextPageLinkText: 'Next',
prevPageLinkText: 'Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>
瑞妮麦格营销
//BeginOAWidget_共享_2241022
谷歌加载（“mootools”，“1.4”）；
//EndOAWidget_共享_2241022
/*BeginOAWidget_实例_2241022:#导航*/
a:链接{
颜色：#FFFFFF；
字体大小：正常；
字体系列：“世纪哥特式”；
字体大小：16px；
文本转换：大写；
}
a:参观了{
颜色：#FFFFFF；
字体大小：正常；
字体家族：继承；
字体大小：继承；
}
/*所有菜单链接*/
#导航a，#子菜单a{
文字装饰：无；
显示：块；
-moz边界半径：0px；
-webkit边界半径：0px；
边界半径：0px；
边界：无；
填充顶部：7px；
右边填充：20px；
填充底部：16px；
左侧填充：20px；
背景色：透明；
/*[禁用]边框左下半径：5px*/
/*[禁用]边框右下半径：5px*/
}
/*仅主菜单链接--[对于非javascript用户，这也适用于子菜单链接]*/
#导航a{
保证金：0；
浮动：左；
}
/*只是子菜单链接*/
#子菜单容器a，#导航李a{
文本对齐：左对齐；
字体系列：“世纪哥特式”；
字体大小：14px；
/*[禁用]宽度：200px*/
背景色：#56D7FE；
颜色：#FFF；
}
/*悬停或焦点上的所有菜单链接*/
#导航a:hover，#导航a:focus，#子菜单容器a:hover，#子菜单容器a:focus，#导航a.MainMenupArentbFocused，#子菜单容器a.SubmenuParentbNfocused{
背景色：#321414；
颜色：#FFFFFF；
}
/*悬停或焦点上的子菜单链接*/
#子菜单a：悬停，
#子菜单a：焦点，
#导航a.mainMenuParentBtnFocused，
#子菜单容器a.子菜单父菜单B焦点，
#导航李a：悬停，
#李娜：焦点{
背景色：透明；
颜色：#FFFFFF；
}
/*---[OLs ULs、LIs和DIVs]----*/
/*所有ULs和OLs*/
#导航，#导航ul，#导航ol，#子菜单容器ul，#子菜单容器ol{
填充：0；
保证金：0；
列表样式：无；
线高：1米；
}
/*所有子菜单OLs和ULs*/
#导航ol，#导航ul，#子菜单容器ul，#子菜单容器ol{
/*子菜单的边框位于此处*/
-moz边界半径：0px；
-webkit边界半径：0px；
边界：无；
左：0px；
背景色：#56D7FE；
/*[禁用]宽度：210px*/
}
/*主菜单中的列表项--[对于非javascript用户，这也适用于子菜单]*/
#nav li{
/*使用背景图像作为分隔符的好地方*/
显示：块；
列表样式：无；
位置：相对位置；
浮动：左；
}
#子菜单{
列表样式：无；
/*[禁用]填充顶部：7px*/
}
#子菜单：悬停{
背景色：#333333；
}
/*主菜单ul或ol elment*/
#导航{
显示：块；
列表样式：无；
z指数：5；
显示：块；
位置：相对位置；
宽度：410像素；
利润上限：-7px；
右边距：自动；
页边距底部：0；
左边距：自动；
}
#子菜单容器{
显示：块；
位置：绝对位置；
排名：0；
左：0；
宽度：150px；
身高：0；
溢出：可见；
z指数：100000000；
背景色：#321414；
边框左下半径：5px；
边框右下半径：5px；
}
斯莫先生{
显示：无；
位置：绝对位置；
溢出：隐藏；
边框左下半径：10px；
边框右下半径：10px；
/*[禁用]背景色：#56D7FE*/
边际上限：0；
右边距：0；
页边距底部：0；
左边距：-2px；
填充顶部：0；
右边填充：0px；
填充底部：0；
左侧填充：0px；
}
/*-----------------------------------[以下仅适用于非javscript用户]--------------------------*/
#nav li{浮动：无；}
#导航li li a{/*仅子菜单链接*/
位置：相对位置；
浮动：无；
}
#nav li ul{/*二级列表*/
位置：绝对位置；
宽度：自动；
左边距：-1000em；/*使用“左”而不是“显示”隐藏菜单，因为屏幕阅读器不会读取“显示：无”*/
边缘顶部：2.8em；
}
/*三级及以上名单*/
#nav li ul ul{边距：-1em 0-1000em；}
#导航李：悬停ul ul{左边距：-1000em；}
/*嵌套在悬停列表项下的列表*/
#导航li:悬停ul{左边距：0；}
#nav li li:悬停ul{左边距：10em；顶部距：-2.5em；}
/*限制noscript键盘可访问性的额外定位规则*/
#nav li a:focus+ul{左边距：0；右边距顶部：2.2em；}
#nav-li-li-a:focus+ul{左：0；边距左：1010em；边距顶部：-2.2em；}
#nav li a:焦点{左：0；左边距：1000em；宽度：10em；边距顶部：0；}
#nav li a:焦点{左：0；左边距：2010em；宽度：10em；边距顶部：-1em；}
#导航李：悬停a:焦点{左边距：0；}
#nav-li-li：悬停a:focus+ul{左边距：10em；}
/*EndOAWidget_实例_2241022*/
#apDiv1{
位置：绝对位置；
宽度：200px；
高度：115px；
z指数：6；
}
//BeginOAWidget_实例_2241022:#导航
addEvent（'domready'，function（）{
var myMenu=新菜单({
id:“导航”，
效果：“幻灯片”，
持续时间：“600”，
希德雷：“1000”，
matchWidthMode：“true”，
方向：“水平”，