我有一个从MySql数据库填充的动态菜单。当单击此菜单上的项目之一时,会发出Ajax请求,并根据传递给Ajax请求的ID突出显示树结构(产品类别及其各自的子类别)。

只需使用<ul><li></li></ul>维护菜单,并且将鼠标悬停在菜单上的一项上时,将调用某些jQuery函数来弹出(下拉)子项。一切顺利

由于某些原因,需要在同一页面上显示相同类型的菜单(这些菜单中只有一个使用Ajax,而其余菜单则不需要使用Ajax)。

问题是我必须加载jQuery函数才能单独弹出菜单项。在页面上加载一次,然后在Ajax请求上再次加载。否则,它不会弹出菜单。因此,在我看来,两个JavaScript在浏览器上被激活,它们阻止了同一页面上其余菜单的正确显示。

应该注意的是,当鼠标悬停时。如果未发出Ajax请求,则所有菜单均正确显示(通过如上所述的唯一使用Ajax调用的菜单)。

希望您能理解我的意思。对不起,我无法对我的问题进行更明确的定义。为什么会这样?有针对这个的解决方法吗。

编辑:

我有此jQuery代码用于弹出菜单。

var arrowimages_new={down:['downarrowclass', 'category_parent_css_js/images/down.gif', 3], right:['rightarrowclass', 'category_parent_css_js/images/right.gif']}

var jqueryslidemenu_new={

    animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

    buildmenu_new:function(menuid, arrowsvar){
        jQuery(document).ready(function($){
            var $mainmenu=$("#"+menuid+">ul")
            var $headers=$mainmenu.find("ul").parent()
            $headers.each(function(i){
                var $curobj=$(this)
                var $subul=$(this).find('ul:eq(0)')
                this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
                this.istopheader=$curobj.parents("ul").length==1? true : false
                $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
                $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
                    '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
                    +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
                    + '" style="border:0;" />'
                )

                $curobj.hover(
                    function(e){
                        var $targetul=$(this).children("ul:eq(0)")
                        this._offsets={left:$(this).offset().left, top:$(this).offset().top}
                        var menuleft=this.istopheader? 0 : this._dimensions.w
                        menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
                        if ($targetul.queue().length<=1) //if 1 or less queued animations
                            $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
                    },
                    function(e){
                        var $targetul=$(this).children("ul:eq(0)")
                        $targetul.slideUp(jqueryslidemenu.animateduration.out)
                    }
                ) //end hover
            }) //end $headers.each()
            $mainmenu.find("ul").css({display:'none', visibility:'visible', zIndex:'99999'})
            $mainmenu.find("ul li").css({zIndex:'99999'})
        }) //end document.ready
    }
}




已经使用加载页面时使用的<script></script>标记的src属性导入了相同的jQuery。

这是使用Ajax调用的函数。

function getParentId(parentId)
{
    $.ajax({
        datatype:"html",
        type: "GET",
        url: "ajax/ParentId.php",
        data: "ed_id=" + parentId+"&t="+new Date().getTime(),
        success: function(response)
        {
            $('#originalMenu').html(response);
            jqueryslidemenu_new.buildmenu_new("myslidemenu", arrowimages_new);
            // The above function is called from here.
        },
        error: function(e)
        {
            alert('Error: ' + e);
        }
    });
    document.getElementById("txt_parent").value=parentId;
}






编辑:

以下是包含js的完整HTML代码(仅出于演示目的)。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Menu</title>
<link rel="stylesheet" type="text/css" href="category_parent_css_js/cat_parent.css" />
<script src="js/jquery-1.6.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="category_parent_css_js/cat_parent_js.js"></script>
<script type="text/javascript" language="javascript">

    //This code is used to pop up menu after an Ajax request is made.
    //On page load, exactly the same code which is an external js in on of preceding script tags is used.

    var arrowimages_new={down:['downarrowclass', 'category_parent_css_js/images/down.gif', 3], right:['rightarrowclass', 'category_parent_css_js/images/right.gif']}

    var jqueryslidemenu_new={

        animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

        buildmenu_new:function(menuid, arrowsvar){
            jQuery(document).ready(function($){
                var $mainmenu=$("#"+menuid+">ul")
                var $headers=$mainmenu.find("ul").parent()
                $headers.each(function(i){
                    var $curobj=$(this)
                    var $subul=$(this).find('ul:eq(0)')
                    this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
                    this.istopheader=$curobj.parents("ul").length==1? true : false
                    $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
                    $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
                        '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
                        +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
                        + '" style="border:0;" />'
                    )

                    $curobj.hover(
                        function(e){
                            var $targetul=$(this).children("ul:eq(0)")
                            this._offsets={left:$(this).offset().left, top:$(this).offset().top}
                            var menuleft=this.istopheader? 0 : this._dimensions.w
                            menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
                            if ($targetul.queue().length<=1) //if 1 or less queued animations
                                $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
                        },
                        function(e){
                            var $targetul=$(this).children("ul:eq(0)")
                            $targetul.slideUp(jqueryslidemenu.animateduration.out)
                        }
                    ) //end hover
                }) //end $headers.each()
                $mainmenu.find("ul").css({display:'none', visibility:'visible', zIndex:'99999'})
                $mainmenu.find("ul li").css({zIndex:'99999'})
            }) //end document.ready
        }
    }

    //This function just sends an Ajax request.

    function getParentId(parentId)
    {
        $.ajax({
            datatype:"html",
            type: "GET",
            url: "ajax/ParentId.php",
            data: "ed_id=" + parentId+"&t="+new Date().getTime(),
            success: function(response)
            {
                $('#originalMenu').html(response);
                jqueryslidemenu_new.buildmenu_new("myslidemenu", arrowimages_new);
                //This calls the above function to pop up the menu.
            },
            error: function(e)
            {
                alert('Error: ' + e);
            }
        });
    }
</script>
</head>

<body>
<form action="" id="dataForm" name="dataForm" method="post">
  <table width="970" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" valign="middle" class="menu"><div id="header_top_menu">
          <div id="myslidemenu" class="jqueryslidemenu">
            <ul>
              <li>
                <div style='width:auto;cursor:hand;text-align:left; background-color:white; border:none; color:black; font-size:small;'>Menu 1</div>
                <ul>
                  <li><a href="#" onclick="getParentId(19); return false;">Menu Item 1</a>
                    <ul>
                      <li><a href="#" onclick="getParentId(21); return false;">Child Item 1</a></li>
                      <li><a href="#" onclick="getParentId(20); return false;">Child Item 2</a></li>
                      <li><a href="#" onclick="getParentId(20); return false;">Child Item 3</a></li>
                      <li><a href="#" onclick="getParentId(20); return false;">Child Item 4</a></li>
                      <li><a href="#" onclick="getParentId(20); return false;">Child Item 5</a></li>
                    </ul>
                  </li>
                </ul>
            </ul>
          </div>
        </div></td>
  </table>

  <br/><br/><br/><br/><br/>

  <table width="970" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" valign="middle" class="menu"><div id="header_top_menu">
          <div id="myslidemenu" class="jqueryslidemenu">
            <ul>
              <li>
                <div style='width:auto;cursor:hand;text-align:left; background-color:white; border:none; color:black; font-size:small;'>Menu 2</div>
                <ul>
                  <li><a href="#" onclick="getParentId(19); return false;">Menu Item 1</a>
                    <ul>
                      <li><a href="#">Child Item 1</a></li>
                      <li><a href="#">Child Item 2</a></li>
                      <li><a href="#">Child Item 3</a></li>
                      <li><a href="#">Child Item 4</a></li>
                      <li><a href="#">Child Item 5</a></li>
                    </ul>
                  </li>
                </ul>
            </ul>
          </div>
        </div></td>
  </table>
</form>
</body>
</html>


该HTML显示两个菜单Menu 1Menu 2。单击Menu 1上的项目时,Ajax请求将发送到该示例中不执行任何操作的URL。发出Ajax请求之前,两个菜单均正确显示。 Menu 1如下所示。



Menu 2如下所示(与菜单1相同)。



菜单1负责发送Ajax请求,该事件在单击Menu 1项时发生(在这种情况下不执行任何操作。此Ajax请求发送到的页面在这种情况下完全留空。这只是一个演示) 。

在这两种情况下,当鼠标指针悬停在Menu Item 1上时,它将打开一个包含Child Item 1 ..... Child Item 5的子菜单。

发出Ajax请求后,如果我将鼠标悬停在Menu Item 1Menu 2上,它将无法正常工作,并且looks如下所示。



选择Menu Item 1上的Menu 2时,该父菜单的最后一个子菜单(Menu Item 1)会立即出现。为什么会这样?

在页面加载时,用于弹出菜单的js代码如以下导入的代码中所述。

<script type="text/javascript" language="javascript" src="category_parent_css_js/cat_parent_js.js"></script>


这与代码段中提到的js代码完全相同。发出Ajax请求后,此代码段中的js代码用于弹出菜单。



如果需要CSS,则以下标记链接如下。

<link rel="stylesheet" type="text/css" href="category_parent_css_js/cat_parent.css" />




.jqueryslidemenu{font:bold 9px Tahoma, Verdana, sans-serif;color:#fff;width: 100%;text-align:left;z-index:99999}
.jqueryslidemenu ul{margin: 0;padding: 0px;list-style-type: none;z-index:99999}
.jqueryslidemenu ul li{position: relative;display: inline;float: left;z-index:auto}
.jqueryslidemenu ul li a{font:bold 12px Tahoma, Verdana, sans-serif;display: block;background:#000;color: #fff;padding: 3px 3px;text-decoration: none;z-index:99999}
* html .jqueryslidemenu ul li a{display: inline-block;z-index:99999}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{color: #fff;text-decoration: none;z-index:99999}
.jqueryslidemenu ul li a:hover{background:#000;text-decoration:none;color: #03C;z-index:99999}
.jqueryslidemenu ul li ul{position: absolute;left: 0;display: block;visibility: hidden;z-index:99999}
.jqueryslidemenu ul li ul li{display: list-item;float: none;z-index:99999}
.jqueryslidemenu ul li ul li ul{top:0;z-index:99999}
.jqueryslidemenu ul li ul li a{font:bold 9px Tahoma, Verdana, Geneva, sans-serif;width: 140px;margin: 0;padding: 6px;border-top-width: 0;border-bottom: 1px solid gray;z-index:99999}
.jqueryslidemenuz ul li ul li a:hover{color:#fff; background:#000;z-index:99999}
.downarrowclass{position: absolute;top: 8px;right: 7px;display:none;z-index:99999}
.rightarrowclass{position: absolute;top: 6px;right: 5px;z-index:99999}

最佳答案

我看了看您的HTML,Javascript和CSS代码。我更正了IDE突出显示的所有错误,并将所有代码简化为1个单个文件以进行测试。我创建了一个ajax方法来仅返回您要替换的菜单的HTML,而我不得不重命名一些变量。此外,我并没有真正接触过您的设置。我确实相信您正在尝试使事情变得更复杂,但没有完整的情境草图,也没有更多的时间为您准备概念验证,因此向您提供以下代码:

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Menu</title>
    <style type="text/css">
        .jqueryslidemenu
        {
            font: bold 9px Tahoma, Verdana, sans-serif;
            color: #fff;
            width: 100%;
            text-align: left;
            z-index: 99999;
        }

            .jqueryslidemenu ul
            {
                margin: 0;
                padding: 0px;
                list-style-type: none;
                z-index: 99999;
            }

                .jqueryslidemenu ul li
                {
                    position: relative;
                    display: inline;
                    float: left;
                    z-index: auto;
                }

                    .jqueryslidemenu ul li a
                    {
                        font: bold 12px Tahoma, Verdana, sans-serif;
                        display: block;
                        background: #000;
                        color: #fff;
                        padding: 3px 3px;
                        text-decoration: none;
                        z-index: 99999;
                    }

                    * html .jqueryslidemenu ul li a
                    {
                        display: inline-block;
                        z-index: 99999;
                    }

                        .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited
                        {
                            color: #fff;
                            text-decoration: none;
                            z-index: 99999;
                        }

                        .jqueryslidemenu ul li a:hover
                        {
                            background: #000;
                            text-decoration: none;
                            color: #03C;
                            z-index: 99999;
                        }

                    .jqueryslidemenu ul li ul
                    {
                        position: absolute;
                        left: 0;
                        display: block;
                        visibility: hidden;
                        z-index: 99999;
                    }

                        .jqueryslidemenu ul li ul li
                        {
                            display: list-item;
                            float: none;
                            z-index: 99999;
                        }

                            .jqueryslidemenu ul li ul li ul
                            {
                                top: 0;
                                z-index: 99999;
                            }

                            .jqueryslidemenu ul li ul li a
                            {
                                font: bold 9px Tahoma, Verdana, Geneva, sans-serif;
                                width: 140px;
                                margin: 0;
                                padding: 6px;
                                border-top-width: 0;
                                border-bottom: 1px solid gray;
                                z-index: 99999;
                            }

        .jqueryslidemenuz ul li ul li a:hover
        {
            color: #fff;
            background: #000;
            z-index: 99999;
        }

        .downarrowclass
        {
            position: absolute;
            top: 8px;
            right: 7px;
            display: none;
            z-index: 99999;
        }

        .rightarrowclass
        {
            position: absolute;
            top: 6px;
            right: 5px;
            z-index: 99999;
        }
    </style>
    <script src="/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">

        var arrowimages_new = { down: ['downarrowclass', 'category_parent_css_js/images/down.gif', 3], right: ['rightarrowclass', 'category_parent_css_js/images/right.gif'] };

        var jqueryslidemenu_new = {
            animateduration: { over: 200, out: 100 }, //duration of slide in/ out animation, in milliseconds

            buildmenu_new: function (menuid, arrowsvar) {
                jQuery(document).ready(function ($) {
                    var $mainmenu = $("#" + menuid + ">ul");
                    var $headers = $mainmenu.find("ul").parent();
                    $headers.each(function (i) {
                        var $curobj = $(this);
                        var $subul = $(this).find('ul:eq(0)');
                        this._dimensions = { w: this.offsetWidth, h: this.offsetHeight, subulw: $subul.outerWidth(), subulh: $subul.outerHeight() };
                        this.istopheader = $curobj.parents("ul").length == 1 ? true : false;
                        $subul.css({ top: this.istopheader ? this._dimensions.h + "px" : 0 });
                        $curobj.children("a:eq(0)").css(this.istopheader ? { paddingRight: arrowsvar.down[2] } : {}).append(
                            '<img src="' + (this.istopheader ? arrowsvar.down[1] : arrowsvar.right[1])
                                + '" class="' + (this.istopheader ? arrowsvar.down[0] : arrowsvar.right[0])
                                + '" style="border:0;" />'
                        );

                        $curobj.hover(
                            function (e) {
                                var $targetul = $(this).children("ul:eq(0)");
                                this._offsets = { left: $(this).offset().left, top: $(this).offset().top };
                                var menuleft = this.istopheader ? 0 : this._dimensions.w;
                                menuleft = (this._offsets.left + menuleft + this._dimensions.subulw > $(window).width()) ? (this.istopheader ? -this._dimensions.subulw + this._dimensions.w : -this._dimensions.w) : menuleft;
                                if ($targetul.queue().length <= 1) //if 1 or less queued animations
                                    $targetul.css({ left: menuleft + "px", width: this._dimensions.subulw + 'px' }).slideDown(jqueryslidemenu_new.animateduration.over);
                            },
                            function (e) {
                                var $targetul = $(this).children("ul:eq(0)");
                                $targetul.slideUp(jqueryslidemenu_new.animateduration.out);
                            }
                        ); //end hover
                    }); //end $headers.each()
                    $mainmenu.find("ul").css({ display: 'none', visibility: 'visible', zIndex: '99999' });
                    $mainmenu.find("ul li").css({ zIndex: '99999' });
                }); //end document.ready
            }
        };

        //This function just sends an Ajax request.

        function getParentId(parentId) {
            $.ajax({
                datatype: "html",
                type: "GET",
                url: "/Home/Test2",
                data: "ed_id=" + parentId + "&t=" + new Date().getTime(),
                success: function (response) {
                    $('#myslidemenu').replaceWith(response);
                    jqueryslidemenu_new.buildmenu_new("myslidemenu", arrowimages_new);
                    //This calls the above function to pop up the menu.
                },
                error: function (e) {
                    alert('Error: ' + e);
                }
            });
        }

        $(function () {
            jqueryslidemenu_new.buildmenu_new("myslidemenu", arrowimages_new);
            jqueryslidemenu_new.buildmenu_new("myslidemenu2", arrowimages_new);
        });
    </script>
</head>

<body>
    <form action="" id="dataForm" name="dataForm" method="post">
        <table width="970" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td align="center" valign="middle" class="menu">
                    <div id="header_top_menu">
                        <div id="myslidemenu" class="jqueryslidemenu">
                            <ul>
                                <li>
                                    <div style='width: auto; cursor: pointer; text-align: left; background-color: white; border: none; color: black; font-size: small;'>Menu 1</div>
                                    <ul>
                                        <li><a href="#" onclick="getParentId(19); return false;">Menu Item 1</a>
                                            <ul>
                                                <li><a href="#" onclick="getParentId(21); return false;">Child Item 1</a></li>
                                                <li><a href="#" onclick="getParentId(20); return false;">Child Item 2</a></li>
                                                <li><a href="#" onclick="getParentId(20); return false;">Child Item 3</a></li>
                                                <li><a href="#" onclick="getParentId(20); return false;">Child Item 4</a></li>
                                                <li><a href="#" onclick="getParentId(20); return false;">Child Item 5</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </td>
            </tr>
        </table>

        <br />
        <br />
        <br />
        <br />
        <br />

        <table width="970" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td align="center" valign="middle" class="menu">
                    <div id="header_top_menu2">
                        <div id="myslidemenu2" class="jqueryslidemenu">
                            <ul>
                                <li>
                                    <div style='width: auto; cursor: pointer; text-align: left; background-color: white; border: none; color: black; font-size: small;'>Menu 2</div>
                                    <ul>
                                        <li><a href="#" onclick="getParentId(19); return false;">Menu Item 1</a>
                                            <ul>
                                                <li><a href="#">Child Item 1</a></li>
                                                <li><a href="#">Child Item 2</a></li>
                                                <li><a href="#">Child Item 3</a></li>
                                                <li><a href="#">Child Item 4</a></li>
                                                <li><a href="#">Child Item 5</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>


我相信解决此问题的最重要方法是删除双ID(这会混淆您的JavaScript选择),并确保所有HTML标记均已关闭(这使浏览器很难理解要构建的内容)。同样,也无需双重加载脚本。一旦在页面上,您就可以重复使用它。

如果您有任何问题,请通知我。

编辑

为了完整起见,我将您看到的AJAX调用返回的HTML添加到“ / Home / Test2”中:

<div id="myslidemenu" class="jqueryslidemenu">
    <ul>
        <li>
            <div style='width: auto; cursor: pointer; text-align: left; background-color: white; border: none; color: black; font-size: small;'>Menu 1</div>
            <ul>
                <li><a href="#" onclick="getParentId(19); return false;">Menu Item 1</a>
                    <ul>
                        <li><a href="#" onclick="getParentId(21); return false;">Child Item 1</a></li>
                        <li><a href="#" onclick="getParentId(20); return false;">Child Item 2</a></li>
                        <li><a href="#" onclick="getParentId(20); return false;">Child Item 3</a></li>
                        <li><a href="#" onclick="getParentId(20); return false;">Child Item 4</a></li>
                        <li><a href="#" onclick="getParentId(20); return false;">Child Item 5</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

关于javascript - 当其中一个菜单使用Ajax调用时,页面上的其余菜单未正确加载,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12679062/

10-12 12:39
查看更多