jQuery/Mootools 冲突 - 找不到解决方案 [英] jQuery/Mootools Conflict - Cant't find solution

查看：59 发布时间：2021/6/3 21:14:08 jquery mootools

本文介绍了jQuery/Mootools 冲突 - 找不到解决方案的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Mootools 和 Jquery，我尝试了所有可能遇到的解决方案，但没有任何效果.

Mootools 用于下拉菜单，jQuery 用于图库.我之前使用过这个组合，并通过使用 noconflict 规则解决了它，但这次似乎没有任何效果.

现场演示:测试站点

下拉菜单位于主页"和作品集"链接上.

我已经发布了原始代码.我将 jQuery 改回 $，这样我就可以对一切都有新的认识.

问题是下拉菜单有效，但它不按照预期的方式工作，应该应用的 css 样式不是.下拉菜单在没有画廊的所有其他页面上都完美无缺.

这是代码:

 <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">//开始OAWidget_Shared_2241022google.load("mootools", "1.4");//EndOAWidget_Shared_2241022<script src="js/MenuMatic_0.68.3.js" type="text/javascript"></script><style type="text/css">/* 开始OAWidget_Instance_2241022:#nav */一条链接{颜色:#FFFFFF；字体粗细:正常；字体系列:世纪哥特式"；字体大小:16px；文本转换:大写；}一个:访问{颜色:#FFFFFF；字体粗细:正常；字体系列:继承；字体大小:继承；}/* 所有菜单链接 */#nav a, #subMenusContainer a{文字装饰:无；显示:块；-moz-border-radius: 0px;-webkit-border-radius: 0px;边界半径:0px；边界:无；填充顶部:7px；padding-right: 20px;填充底部:16px；padding-left: 20px;背景色:透明；/* [禁用]border-bottom-left-radius: 5px;*//* [禁用]border-bottom-right-radius: 5px;*/}/* 只是主菜单链接--[对于非 JavaScript 用户，这也适用于子菜单链接]*/#导航{保证金:0;向左飘浮;}/* 只是子菜单链接 */#subMenusContainer a, #nav li li a{文本对齐:左；字体系列:世纪哥特式"；字体大小:14px；/* [禁用]宽度:200px;*/背景色:#56D7FE；颜色:#FFF；}/* 悬停或焦点上的所有菜单链接 */#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{背景颜色:#321414；颜色:#FFFFFF；}/* 悬停或焦点上的子菜单链接 */#subMenusContainer a:悬停，#subMenusContainer a:focus,#nav a.mainMenuParentBtnFocused,#subMenusContainer a.subMenuParentBtnFocused,#nav li a:悬停，#nav li a:focus{背景色:透明；颜色:#FFFFFF；}/* ----[ OL UL、LI 和 DIV ]----*//* 所有 UL 和 OL */#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol {填充:0；边距:0；列表样式:无；行高:1em；}/* 所有子菜单 OL 和 UL */#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {/*子菜单周围的边框在这里*/-moz-border-radius: 0px;-webkit-border-radius: 0px;边界:无；左:0px；背景色:#56D7FE；/* [禁用]宽度:210px;*/}/* 列出主菜单中的项目 --[对于非 JavaScript 用户，这也适用于子菜单] */#导航李{/*使用背景图像作为分隔线的好地方*/显示:块；列表样式:无；位置:相对；向左飘浮;}#subMenusContainer li{列表样式:无；/* [禁用]padding-top: 7px;*/}#subMenusContainer li:hover{背景颜色:#333333；}/* 主菜单 ul 或 ol 元素 */#导航{显示:块；列表样式:无；z-索引:5；显示:块；位置:相对；宽度:410px；边距顶部:-7px；右边距:自动；底边距:0；左边距:自动；}#subMenusContainer{显示:块；位置:绝对；顶部:0；左:0；宽度:150px；高度:0；溢出:可见；z-index:1000000000；背景颜色:#321414；边框左下角半径:5px；边框右下角半径:5px；}.smOW{显示:无；位置:绝对；溢出:隐藏；边框左下角半径:10px；边框右下角半径:10px；/* [禁用]背景色:#56D7FE；*/边距顶部:0；右边距:0；底边距:0；左边距:-2px；填充顶部:0;填充右:0px；填充底部:0;填充左:0px；}/* --------------------------[以下内容仅供非javscript用户]--------------------------*/#nav li li{ float:none;}#nav li li a{/* 只是子菜单链接*/位置:相对；浮动:无；}#nav li ul {/* 二级列表 */位置:绝对；宽度:自动；左边距:-1000em；/* 使用 left 而不是 display 来隐藏菜单，因为 display: none 不会被屏幕阅读器读取 */边距顶部:2.8em；}/* 三级及以上列表 */#nav li ul ul { 保证金:-1em 0 0 -1000em;}#nav li:hover ul ul { margin-left: -1000em;}/* 嵌套在悬停列表项下的列表 */#nav li:hover ul{ margin-left: 0;}#nav li li:hover ul { margin-left: 10em;边距顶部:-2.5em;}/* 有限的 noscript 键盘可访问性的额外定位规则 */#nav li a:focus + ul { margin-left: 0;边距顶部:2.2em；}#nav li li a:focus + ul { left:0;左边距:1010em；边距顶部:-2.2em;}#nav li li a:focus {left:0;左边距:1000em；宽度:10em；边距顶部:0;}#nav li li li a:focus {left:0;左边距:2010em；宽度:10em；边距顶部:-1em;}#nav li:hover a:focus{ margin-left: 0;}#nav li li:hover a:focus + ul { margin-left: 10em;}/* EndOAWidget_Instance_2241022 */#apDiv1 {位置:绝对；宽度:200px；高度:115px；z-索引:6；}</风格><脚本类型=文本/xml"><!--<oa:widgets><oa:widget wid="2241022" binding="#nav"/></oa:widgets>--><script type="text/javascript">//开始OAWidget_Instance_2241022:#navwindow.addEvent('domready', function() {var myMenu = new MenuMatic({id:"导航",效果:幻灯片"，持续时间:600"，隐藏延迟:1000"，匹配宽度模式:真"，方向:水平"，方向:{ x: '右', y: '向下' },不透明度:95});});//EndOAWidget_Instance_2241022<脚本>jQuery.noConflict();<!-- 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><!-- 我们只希望在禁用 javascript 时显示缩略图 --><script type="text/javascript">document.write('<style>.noscript { display: none; }</style>');<!-- InstanceEndEditable --><身体><div id="marketing"><img src="images/marketingBranding.png" width="200" height="51"></div><div id="标题"><div id="标志"><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>

<div id="导航"><div id="navigation_container"><ul id="导航"><li><a href="index.html">首页</a><ul><li><a href="history.html">history/Highlights</a></li><li><a href="business.html">business 精神/原则</a></li></ul></li><li><a href="services.html">services</a></li><li><a href="#">作品集</a><ul><li><a href="logo_design.html">标志设计</a></li><li><a href="stationary.html">品牌包</a></li><li><a href="branding.html">品牌/营销</a></li><li><a href="website_designs.html">网站设计</a></li><li><a href="contact.html">我们聊聊</a></li>

<!DOCTYPE html> <html><head> <meta content="charset=utf-8">  <title>Renee Mc Magh Marketing</title>  <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">  </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>  <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> <script type="text/javascript"> document.write('<style>.noscript { display: none; }</style>'); </script>  </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">Portfolio <img src="img/arrow_right.gif" width="10" height="8"><a href="website_designs.html">Web Design</a></div> <div id="content">  <h1>Web Design</h1> <h2> Be on the WORLD WIDE WEB </h2> <p> </p> <div>  <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> </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>  <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>  </body> </html>

jQuery/Mootools 冲突 - 找不到解决方案 [英] jQuery/Mootools Conflict - Cant't find solution

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

jQuery/Mootools 冲突 - 找不到解决方案 [英] jQuery/Mootools Conflict - Cant&#39;t find solution

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

jQuery/Mootools 冲突 - 找不到解决方案 [英] jQuery/Mootools Conflict - Cant't find solution

登录关闭