Question

我在我的母版页中添加一个新菜单我应该在母版页中使用javascript函数来设置我的菜单，第一次加载页面时所有工作正常但是当我点击我的menuitem重定向到另一个aspx页面时master中的setupmenu（）函数没有工作这是我的代码

<%@ Master Language="VB" AutoEventWireup="false" CodeFile="MasterPage.master.vb"
    Inherits="MasterPage" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Qualipro Net</title>
    <script type="text/javascript">
    $( document ).ready(function() {
        function setupmenu() {
            $("#section-menu")
        .accordion({
            "header": "a.menuitem"
        })
        .bind("accordionchangestart", function (e, data) {
            data.newHeader.next().andSelf().addClass("current");
            data.oldHeader.next().andSelf().removeClass("current");
        })
        .find("a.menuitem:first").addClass("current")
        .next().addClass("current");

            $('#section-menu .submenu').css('height', 'auto');
        }
        });
        </script>
         <script  src="js/scripts.js" type="text/javascript"></script>
        <script  type="text/javascript" src="js/jqPlot/jquery.jqplot.min.js"></script>
        <script  type="text/javascript" src="js/jqPlot/plugins/jqplot.barRenderer.min.js"></script>
        <script  type="text/javascript" src="js/jqPlot/plugins/jqplot.pieRenderer.min.js"></script>
        <script  type="text/javascript" src="js/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
        <script  type="text/javascript" src="js/jqPlot/plugins/jqplot.highlighter.min.js"></script>
        <script  type="text/javascript" src="js/jqPlot/plugins/jqplot.pointLabels.min.js"></script>
        <script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="js/jquery-ui/jquery.ui.core.min.js"></script>
        <script src="js/jquery-ui/jquery.ui.widget.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui/jquery.ui.accordion.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui/jquery.effects.core.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui/jquery.effects.slide.min.js" type="text/javascript"></script>
        <body id="Body1" dir="ltr" runat="server">
    <form id="form1" runat="server">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
           <asp:Panel ID="panelAModif" runat="server" align="left" CssClass="panelmod">
                    <div class="grid_2">
                        <div class="box sidemenu">
                            <div class="block" id="section-menu">
                                <ul class="section menu">
                                    <li><a class="menuitem">G.R.H</a>
                                        <ul class="submenu">
                                            <li><a >Employés</a> 
                                            </li>
                                            <li><a runat="server"  href="~/employe/RemplacerPersonne.aspx">Remplacer Personne</a> </li>
                                        </ul>
                                    </li>
                                    <li><a class="menuitem">Documentation</a>
                                        <ul class="submenu">
                                            <li><a>Documents internes</a> </li>
                                     </ul>
                                    </li>
                                    <li><a class="menuitem">Audits</a>
                                        <ul class="submenu">
                                            <li><a>Audits</a> </li>

                                        </ul>
                                    </li>
                                    <li><a class="menuitem">Actions</a>
                                        <ul class="submenu">
                                            <li><a>Actions</a> </li>
                                            <li><a>Demandes d'actions</a> </li>
                                            <li><a>Modèle d'actions</a> </li>

                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </asp:Panel>
      </asp:ContentPlaceHolder>
    </form>
    </body>

我没有找到从另一个内容页面调用javascript函数的解决方案。提前谢谢

Answer 1

第一个问题：

你的javascript / jQuery脚本必须在包含 jQuery之后发生，否则它将不知道$的含义。

例如按此顺序：

<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script> <script type="text/javascript"> $( document ).ready(function() { function setupmenu() { $("#section-menu") .accordion({ "header": "a.menuitem" }) .bind("accordionchangestart", function (e, data) { data.newHeader.next().andSelf().addClass("current"); data.oldHeader.next().andSelf().removeClass("current"); }) .find("a.menuitem:first").addClass("current") .next().addClass("current"); $('#section-menu .submenu').css('height', 'auto'); } }); </script>

目前你的jQuery代码是第一件事，甚至包括jQuery之前。

第二个问题：

您的setupmenu函数在DOM就绪处理程序的范围内声明，因此对该匿名函数之外的任何内容都不可见！

将该代码放在任何DOM就绪处理程序之外，因为它只能由已经等待DOM准备好的东西调用。这将使其成为一个全球性的功能：

<script type="text/javascript"> function setupmenu() { $("#section-menu") .accordion({ "header": "a.menuitem" }) .bind("accordionchangestart", function (e, data) { data.newHeader.next().andSelf().addClass("current"); data.oldHeader.next().andSelf().removeClass("current"); }) .find("a.menuitem:first").addClass("current") .next().addClass("current"); $('#section-menu .submenu').css('height', 'auto'); } </script>

母版页javascript加载事件

1 个答案:

第一个问题：

第二个问题：