我有一个工作上拉菜单，我无法修改。我需要能够通过URL将值传递到页面中，并使用它来打开所选菜单。我使用 jquery-1.8.2.min 在 ServiceNow （$ j的原因）中工作。我在包含文件中有以下代码：
(function($j){
/*------------------------------------------*/
/* JavaScript On */
/*------------------------------------------*/
$j("html").addClass("jsOn");
/*------------------------------------------*/
/* Mouse Over */
/*------------------------------------------*/
$j(document).ready(function() {
var hover = ".PullUpMenu a, #Contents h2 a, #Contents h3 a, #SliderArea a, #Release a";
$j(hover).on("mouseover focus", function() {
$j(this).find("img").stop().animate({opacity:"0.7"}, 200);
}).on("mouseout blur", function() {
$j(this).find("img").stop().animate({opacity:"1"}, 200);
});
});
/*------------------------------------------*/
/* User Agent */
/*------------------------------------------*/
var nut = navigator.userAgent.toLowerCase();
var sp = nut.indexOf("iphone") != -1 || nut.indexOf("ipad") != -1 || nut.indexOf("ipod") != -1 || nut.indexOf("android") != -1;
var ie8 = nut.indexOf("msie 8") != -1;
/*------------------------------------------*/
/* Pull Up Menu */
/*------------------------------------------*/
$j(document).ready(function() {
for(var i=0; i<5; i++){
$j("#PullUpMenu"+i+" a").addClass("pum"+i);
}
$j(".GlobalNav a").addClass("gn");
var openMenu = function(open, n) {
if(open) {
$j(".PullUpMenu").eq(n).css({display:"block"}).stop().animate({top:"-343px", height:"350px"}, 300, "swing");
$j(".gn").removeClass("current").eq(n).addClass("current");
} else {
$j(".PullUpMenu").eq(n).stop().animate({top:"7px", height:"10px"}, 300, "swing", function() {$j(this).css({display:"none"});});
$j(".gn").eq(n).removeClass("current");
}
}
if(!sp) {
var gn = function(s) {
if($j(s).hasClass("gn")) {
return $j(".gn").index(s);
} else if($j(s).hasClass("pum1") || $j(s).hasClass("pum2") || $j(s).hasClass("pum3") || $j(s).hasClass("pum4")){
return $j(s).attr("class").charAt(3)-1;
} else {
return $j(".PullUpMenu").index(s);
}
}
$j(".PullUpMenu, .gn, .menu").on("mouseover focusin", function() {
openMenu(1, gn(this));
}).on("mouseout focusout", function() {
openMenu(0, gn(this));
});
//$j(".gn").on("click", function() {return false;});
} else {
var open = [];
$j(".gn").on("click", function() {
var n = $j(".gn").index(this);
$j(".gn").each(function(e) {
if(e == n) {
var op = (open[n]) ? 0 : 1;
openMenu(op, n);
open[n] = op;
} else {
openMenu(0, e);
open[e] = 0;
}
});
return false;
});
}
});
/*------------------------------------------*/
/* Topics Tab */
/*------------------------------------------*/
$j(document).ready(function() {
$j("#TopicsSet ul#TopicsBtn a").on("click", function() {
var tabNum = $j("#TopicsSet ul#TopicsBtn a").index(this);
$j("#TopicsSet ul#TopicsBtn a").removeClass("current").eq(tabNum).addClass("current");
$j("#TopicsSet div").css({display:"none"}).eq(tabNum).css({display:"block"});
return false;
});
});
/*------------------------------------------*/
/* Slide Banner */
/*------------------------------------------*/
$j(document).ready(function() {
var bnrMax = $j("#SliderArea ul li").length;
if(bnrMax <= 4) return false;
var slideInterval = 5000;
var flag = 0;
var tid;
var sbs = 0;
var sd = '<div id="SlideButton">';
sd += '<div id="SlideButtonLeft"><a href="#"><img src="/image/h5_en/top/button_slide_left.gif" alt="Previous" width="30" height="60" /></a></div>';
sd += '<div id="SlideButtonStop"><a href="#"><img src="/image/h5_en/top/button_slide_stop_off.gif" alt="Stop" width="30" height="60" /></a></div>';
sd += '<div id="SlideButtonRight"><a href="#"><img src="/image/h5_en/top/button_slide_right.gif" alt="Next" width="30" height="60" /></a></div>';
sd += '</div>';
$j(sd).appendTo("#RotationBanner");
$j("#SlideButton").css({display: "block"});
var autoslide = function() {
tid = setTimeout(function() {
slide(0);
}, slideInterval);}
var slide = function(lr) {
flag = 1;
if(lr) {
$j("#SliderArea ul li:last").insertBefore("#SliderArea ul li:first");
$j("#SliderArea ul").css({left:"-245px"}).animate({left:"0px"}, 400, "swing", function() {
flag = 0;
if(!sbs) autoslide();
});
} else {
$j("#SliderArea ul").animate({left:"-245px"}, 400, "swing", function() {
$j("#SliderArea ul li:first").appendTo(this);
$j(this).css({left:"0"});
flag = 0;
if(!sbs) autoslide();
});
}
}
$j("#SlideButtonLeft a, #SlideButtonRight a").on("click", function() {
$j(this).blur();
if(flag) return false;
clearTimeout(tid);
var button = ($j(this).parent().attr("id") == "SlideButtonLeft") ? 1 : 0;
slide(button);
return false;
});
$j("#SlideButtonStop a").on("click", function() {
$j(this).blur();
var src = $j(this).find("img").attr("src");
if(!sbs) {
sbs = 1;
$j(this).find("img").attr("src", src.replace("_off.", "_on."));
clearTimeout(tid);
} else {
sbs = 0;
$j(this).find("img").attr("src", src.replace("_on.", "_off."));
autoslide();
}
return false;
});
autoslide();
});
/*------------------------------------------*/
/* for IE8 */
/*------------------------------------------*/
$j(document).ready(function() {
if(!ie8) return false;
var brandingIE8 = function() {
var w = $(window).width();
var hw = (w>965) ? Math.floor(w/2)+"px" : "482px";
$j("#BrandingImgStyle").css({left:hw});
}
brandingIE8();
$j(window).on("resize", brandingIE8);
});
})(jQuery);
这是包含HTML和文件调用的代码：
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:requires name="scripts/lib/jquery_includes.js"/>
<g:include_script src="corporate.jsdbx"/>
<g:include_script src="bjqs-1.3.min.jsdbx"/>
<script class="secret-source">
jQuery(document).ready(function($j) {
$j('#banner-slide').bjqs({
animtype : 'slide',
height : 300,
width : 960,
responsive : true,
randomstart : false
});
});
</script>
<style>
body {behavior: url("csshover3.htc");}
#menu li .drop {background:url("img/drop.gif") no-repeat right 8px;
</style>
<table id="_tblcontent" border="0" cellpadding="0" cellspacing="0" width="960px">
<!--Header Menu and Scroller Image-->
<tr>
<td align="center">
<!--BrandingAreaContainer-->
<div id="BrandingAreaContainer">
<!--BrandingArea-->
<div id="BrandingArea">
<table id="_content1" width="100%" border="0" cellpadding="0" cellspacing="2">
<tr>
<td id="_img-slider" width="100%" height="300px" align="center">
<div id="banner-slide">
<!-- start Basic Jquery Slider -->
<ul class="bjqs">
<li><img src="fanatical.pngx" title="" /></li>
<li><img src="results.jpgx" title="" /></li>
<li><img src="Greatness.jpgx" title="" /></li>
<li><img src="passion.jpgx" title="" /></li>
<li><img src="transparency.jpgx" title="" /></li>
<li><img src="friendsfamily.jpgx" title="" /></li>
</ul>
<!-- end Basic jQuery Slider -->
</div>
</td>
</tr>
</table>
</div>
<!--/BrandingArea-->
<!--GlobalNavContainer-->
<div id="GlobalNavContainer">
<!--GlobalNav-->
<div id="GlobalNav">
<div id="GlobalNav1" class="GlobalNav">
<a id="Nav1" href="#">
<img src="nav1.gifx" alt="Service Desk" height="127" width="240" />
</a>
</div>
<!--PullUpMenu1-->
<div id="PullUpMenu1" class="PullUpMenu">
<h2 class="ImageStyle">
<a href="#">Service Desk ></a>
</h2>
<ul id="menu" class="ClearFix">
<li>
<a class="drop" href="#">Computers and Hardware</a>
<div class="dropdown_4columns"><!-- Begin 4 column container -->
<div class="col_1">
<ul class="greybox">
<li><a href="e6430.do">HP z6430</a></li>
<li><a href="e6530.do">HP z6530</a></li>
<li><a href="e6330.do">z6330 UK</a></li>
<li><a href="e6430u_standard.do">HP z430u US</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="6430u">HP 7430u</a></li>
<li><a href="mac_13_pro.do">13" MacBook Pro</a></li>
<li><a href="mac_15_pro.do">15" MacBook Pro</a></li>
<li><a href="mac_15_retina.do">15" Macbook Pro Retina</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="dell_optiplex.do">Dell Optiplex</a></li>
<li><a href="sd_order_mac_mini.do">Mac Mini</a></li>
<li><a href="sd_order_desk_phone.do">Desk Phone</a></li>
<li><a href="sd_order_printer.do">Printer</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="smobile_phone.do">Mobile Device</a></li>
<li><a href="accessories.do">Accessories</a></li>
</ul>
</div>
</div><!-- End 4 column container -->
</li>
<li>
<a class="drop" href="#">Software and Applications</a>
<div class="dropdown_3columns"><!-- Begin 3 column container -->
<div class="col_1">
<ul class="greybox">
<li><a href="ms_office.do">Microsoft Office</a></li>
<li><a href="ms_sharepoint.do">Microsoft Sharepoint</a></li>
<li><a href="adobe_other.do">Other Adobe</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="ms_visio.do">Microsoft Visio</a></li>
<li><a href="ms_other.do">Microsoft Other</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="ms_project.do">Microsoft Project</a></li>
<li><a href="adobe_acrobat.do">Adobe Acrobat</a></li>
</ul>
</div>
</div><!-- End 3 column container -->
</li>
</ul>
</div>
<!--/PullUpMenu1-->
<div id="GlobalNav2" class="GlobalNav">
<a href="#">
<img src="nav2.gifx" alt="Services" height="127" width="240" />
</a>
</div>
<!--PullUpMenu2-->
<div id="PullUpMenu2" class="PullUpMenu" style="display: none; overflow: hidden; top: 7px; height: 10px;">
<h2 class="ImageStyle">
<a href="#">Services ></a>
</h2>
<ul id="menu" class="ClearFix">
<li>
<a class="drop" href="#">Change Management</a>
<div class="dropdown_1column"><!-- Begin 1 column container -->
<div class="col_1">
<ul class="greybox">
<li><a href="changes.do">View Open Change Requests</a></li>
<li><a href="changes.do">View Closed Change Requests</a></li>
<li><a href="calender.do">View Change Request Calendar</a></li>
</ul>
</div>
</div>
</li>
<li>
<a class="drop" href="#">Incident Management</a>
<div class="dropdown_1column"><!-- Begin 1 column container -->
<div class="col_1">
<ul class="greybox">
<li><a href="incidents.do">View Open Incidents</a></li>
<li><a href="incidents.do">View Closed Incidents</a></li>
<li><a href="#">View Dashboards</a></li>
</ul>
</div>
</div>
</li>
<li>
<a class="drop" href="#">Deployments</a>
<div class="dropdown_2columns"><!-- Begin 2 column container -->
<div class="col_1">
<ul class="greybox">
<li><a href="deployment.do">Create Deployment Request</a></li>
<li><a href="requests.do">All Open Deployments</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="requests.do">My Open Deployments</a></li>
<li><a href="requests.do">My Closed Deployments</a></li>
</ul>
</div>
</div><!-- End 2 column container -->
</li>
</ul>
</div>
<!--/PullUpMenu2-->
<div id="GlobalNav3" class="GlobalNav">
<a href="#">
<img src="nav3.gifx" alt="Systems" height="127" width="240" />
</a>
</div>
<!--PullUpMenu3-->
<div id="PullUpMenu3" class="PullUpMenu" style="display: none; overflow: hidden; top: 7px; height: 10px;">
<h2 class="ImageStyle">
<a href="#">Systems ></a>
</h2>
<ul id="menu" class="ClearFix">
<li>
<a class="drop" href="#">Post</a>
<div class="dropdown_4columns"><!-- Begin 4 column container -->
<div class="col_1">
<ul class="greybox">
<li><a href="access.do">Access and Permissions</a></li>
<li><a href="price_change.do">Price Change Request</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="analysis.do">Analysis Request</a></li>
<li><a href="issue.do">Report an Issue</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="operational.do">Operational Request</a></li>
</ul>
</div>
<div class="col_1">
<ul class="greybox">
<li><a href="env.do">Environment Deployment Request</a></li>
</ul>
</div>
</div><!-- End 4 column container -->
</li>
</ul>
</div>
<!--/PullUpMenu3-->
<div id="GlobalNav4" class="GlobalNav">
<a href="#">
<img src="nav4.gifx" alt="My Corner" height="127" width="240" />
</a>
</div>
<!--PullUpMenu4-->
<div id="PullUpMenu4" class="PullUpMenu" style="display: none; overflow: hidden; top: 7px; height: 10px;">
<h2 class="ImageStyle">
<a href="#">My Corner ></a>
</h2>
<ul id="menu" class="ClearFix">
<li>
<a class="drop" href="#">Human Resources</a>
<div class="dropdown_1column"><!-- Begin 1 column container -->
<div class="col_1">
<ul class="greybox">
<li><a href="new.do">Create an HR Request</a></li>
<li><a href="requests.do">My Requests</a></li>
<li><a href="requests.do">My Closed Requests</a></li>
</ul>
</div>
</div>
</li>
<li>
<a class="drop" href="#">Payroll</a>
<div class="dropdown_1column"><!-- Begin 1 column container -->
<div class="col_1">
<ul class="greybox">
<li><a href="new.do">Create a Payroll Request</a></li>
<li><a href="requests.do">My Requests</a></li>
<li><a href="requests.do">My Closed Requests</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<!--/PullUpMenu-->
</div>
<!--/GlobalNav-->
</div>
<!--/GlobalNavContainer-->
</div>
<!--/BrandingAreaContainer-->
</td>
</tr>
<!--/Header Menu and Scroller Image-->
</table>
</j:jelly>
我需要采取两种措施：1）能够将URL中的值传递给代码，以及2）使该值显示所选的上限。我尝试了多种方法只是调用页面上的函数，甚至没有成功的操作。我是一个相对较新的jquery用户，因此需要一些时间来加快速度。
这是我尝试过的最后一些代码，它们失败了：
<script class="pick-me">
jQuery(document).ready(function($j) {
$j(openMenu(1, gn('a#Nav1')););
});
</script>
和
<script class="pick-me">
jQuery(document).ready(function($j) {
$j(('a#Nav1').openMenu(1, this););
});
</script>
任何帮助都将不胜感激。
答案 0 :(得分：0)
您没有在脚本中将$j定义为jQuery。
您希望将所有内容包装在immediately invoked function expression中，如下所示：
(function ($j) {
$j(document).ready(function () {
for (var i = 0; i < 5; i++) {
$j("#PullUpMenu" + i + " a").addClass("pum" + i);
}
$j(".GlobalNav a").addClass("gn");
var openMenu = function (open, n) {
if (open) {
$j(".PullUpMenu").eq(n).css({
display: "block"
}).stop().animate({
top: "-343px",
height: "350px"
}, 300, "swing");
$j(".gn").removeClass("current").eq(n).addClass("current");
} else {
$j(".PullUpMenu").eq(n).stop().animate({
top: "7px",
height: "10px"
}, 300, "swing", function () {
$(this).css({
display: "none"
});
});
$j(".gn").eq(n).removeClass("current");
}
}
if (!sp) {
var gn = function (s) {
if ($j(s).hasClass("gn")) {
return $j(".gn").index(s);
} else if ($j(s).hasClass("pum1") || $j(s).hasClass("pum2") || $j(s).hasClass("pum3") || $j(s).hasClass("pum4")) {
return $j(s).attr("class").charAt(3) - 1;
} else {
return $j(".PullUpMenu").index(s);
}
}
$j(".PullUpMenu, .gn").on("mouseover focusin", function () {
openMenu(1, gn(this));
}).on("mouseout focusout", function () {
openMenu(0, gn(this));
});
//$j(".gn").on("click", function() {return false;});
} else {
var open = [];
$j(".gn").on("click", function () {
var n = $j(".gn").index(this);
$j(".gn").each(function (e) {
if (e == n) {
var op = (open[n]) ? 0 : 1;
openMenu(op, n);
open[n] = op;
} else {
openMenu(0, e);
open[e] = 0;
}
});
return false;
});
}
});
})(jQuery);
请注意(function($j) { //your code })(jQuery);
答案 1 :(得分：0)
我与队友一起解决了这个问题，但我还是需要添加一些跨浏览器功能。
在子页面上，我们添加了以下代码来索引导航，其顺序相同：
$j(document).ready(function () {
$j(".cms_menu_dropdown_link").on("click", function() {
localStorage.setItem("menu_index", $j(this).parent().index());
});
并在文件中，在上拉菜单中，我们添加了：
if(localStorage.getItem("menu_index") !== null) {
openMenu(1,localStorage.getItem("menu_index"))
}
这在Chrome中运行良好，但我需要为其他浏览器调整它。