Question

我尝试用ajax制作新的菜单部分。点击部分（点击我），将创建新菜单。但是有一个问题。

新创建的菜单中的http链接不起作用。也许问题在于我通过importNode从XML中选择 - 但我更喜欢使用XML。我寻找检查员，但没什么奇怪的。创造了新的LI（但事实并非正如我之前所说的那样）

你帮我找错了吗？

这是我的代码

<script>
if (window.XMLHttpRequest) {
    http_request = new XMLHttpRequest();
}

else if (window.ActiveXObject) {
try {
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
    try {
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {

    }
}
  }
else {

}

var ajaxbase = 'testajax.php';

function async_post_xml() {


http_request.onreadystatechange = function() {
    try {

        if (http_request.readyState==4) {

            if (http_request.status==200) {

var xmlDoc = http_request.responseXML;


document.getElementById("nav").appendChild(document.importNode(xmlDoc.getElementsByTagName("child")[0].childNodes[0], true));

                }
            else {

            }
        }
    }
    catch (e) {

    }
};

http_request.open('POST', ajaxbase, true);

http_request.send('login=123&password=SUPER');


}

</script>

 <div id="mainmenu">
    <ul id="nav">
      <li><a href="">Menu 1</a> 
        <ul> 
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
        </ul> 
      </li>

      <li><a href="">Menu 2</a> 
        <ul> 
         <li><a href="#">Item 1</a></li> 
         <li><a href="#">Item 2</a></li> 
        </ul> 
      </li> 

      <li><a id="manipulate" onclick="async_post_xml()">Click on me</a> 

      </li>
    </ul> 
</div>

下面是我的testajax.php

header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"windows-1251\"?>";?>
<answer><child><li><a href="http://miscrosoft.com">Menu 4</a><ul><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li></ul></li></child></answer>

这是我的css文件

#mainmenu
{
    float:left;
}
#mainmenu ul
{
    margin: 0;
    padding: 0;
    list-style: none;
}
#mainmenu ul li
{
    position: relative;
    float:left;
}
#mainmenu ul li ul, #mainmenu ul li ul li
{
    width:130px;
}
#mainmenu li ul
{
    position: absolute;
    left: 0;
    top: 29px;
    display: none;
    float:left;
}
#mainmenu ul li a 
{
    float:left;
    color: black;
    width:130px;
    font-size:16px;
    padding: 5px 0 5px 0;
    text-align:center;
    background: #CCCCCC;
}
#mainmenu li ul li a
{
    padding:5px 0 3px 10px;
    text-align:left;
    font-size:12px;
    width:120px;
    background: #EEEEEE;
}
#mainmenu li ul li a:hover
{
    background: #152C36;
    color:White;
}
* html #mainmenu ul li { float: left; height: 1%; }
* html #mainmenu ul li a { height: 1%; }
#mainmenu li:hover ul, 
#mainmenu  li.over ul { display: block; }

和最后一个 - 点击＆＃34后呈现HTML;点击我＆＃34;

<div id="mainmenu">
     <ul id="nav">
      <li><a href="">Menu 1</a> 
        <ul> 
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 3</a></li>
        </ul> 
      </li>

      <li><a href="">Menu 2</a> 
        <ul> 
          <li><a href="#">Item 1</a></li> 
          <li><a href="#">Item 2</a></li> 
        </ul> 
      </li> 

      <li><a id="manipulate" onclick="async_post_xml()">Click on me</a> 

      </li>
    <li><a href="http://miscrosoft.com">Menu 4</a><ul><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li></ul></li></ul>
</div>

不适用于CSS样式

0 个答案: