Question

我正在构建jquery下拉菜单，我的菜单代码是：

<!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>Accordion Menu Using jQuery</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script>
function getCountries()
{
    var url ='http://localhost/scorefinal/include-xml/countries_leagues.xml';
    var xmlhttp,x,i,txt,xx,j;
    var cats = new Array();
    var name = new Array();
    var contest_name = new Array();
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            x=xmlhttp.responseXML.documentElement.getElementsByTagName("country");
            txt="<div id='firstpane' class='menu_list'>";

            for(i=0;i<x.length;i++)
            {//to get all country names & competions without country like(world cup,.....) from the xml file
                cats[i] = x[i].getAttribute('link_name');
                name[i] = x[i].getAttribute('name');
                txt=txt +"<p class='menu_head'>"+ name[i] +"</p>";
                txt=txt +"<div class='menu_body'>";
                xx=x[i].getElementsByTagName("contest");
                for(var v=0;v<xx.length;v++)
                {
                    contest_name[v] = xx[v].getAttribute('name');
                    txt=txt+"<a href='#'>"+contest_name[v]+"</a>";
                }
                txt=txt+"</div>";
            }
            txt=txt +"</div>";
            document.getElementById("countries").innerHTML=txt;
            //alert(document.getElementById("countries").innerHTML);
        }
    };
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}
</script>

<style type="text/css">
body {
    margin: 10px auto;
    font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.menu_list {    
    width: 150px;
}
.menu_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
    font-weight:bold;
    background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body {
    display:none;
}
.menu_body a{
  display:block;
  color:#006699;
  background-color:#EFEFEF;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.menu_body a:hover{
  color: #000000;
  text-decoration:underline;
  }
</style>
</head>
<body>
<div id='countries'></div>
<script>getCountries();</script>
</body>
<script type="text/javascript">
$(document).ready(function()
{
    //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
    alert('test');
    $("#firstpane p.menu_head").click(function()
    {
        $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
        $(this).siblings().css({backgroundImage:"url(left.png)"});
    });
});
</script>

</html>

我有一个javascript函数getCountries（）来获取XML数据并构建菜单现在菜单只是显示当我点击任何menu_head时我无法获得子菜单。注意：我添加alert('test');以查看document.ready是否有效，我发现在添加alert();之后，菜单在除Chrome和＆amp;之外的所有浏览器上都能正常运行歌剧，但这没有意义，因为当我删除警报菜单停止。

如果有人可以帮助我，我会在这个问题上工作三天而我什么都没有？

Answer 1

根据您的问题并且与Chrome相关，我怀疑浏览器端的xml解析器并通过这些最终链接。浏览。

XML parser not working  in chrome .Try for alternative (only my conclusion ).

Jquery xml parser not working in Chrome?

和

XML parsing in Chrome vs IE and Firefox

jquery下拉菜单不适用于chrome

1 个答案: