從一個URL觸發一個jquery函數 - 修改函數？

Question

我有一個工作上拉菜單，我無法修改。我需要能夠通過URL將值傳遞到頁面，並使用它打開選定的菜單。我有這個工作ServiceNow（$ j的原因）使用jquery-1.8.2.min。我有一個包含文件下面的代碼：

(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）讓該值顯示選定的pullup ment。我嘗試了多種方法來調用頁面上的函數，甚至沒有成功地執行該操作。我是一個相對較新的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> 

任何幫助，將不勝感激。

Answer 1

您沒有在腳本中將$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);

Answer 2

我曾與隊友來解決這個問題，但我還需要在一個小跨加瀏覽器功能。

在子頁面，我們下面的代碼添加到索引中的導航，這是在同一順序：

$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中很有用，但我需要爲其他瀏覽器調整它，我相信。