Question

我想在链接点击下拉菜单，我已搜索并发现所有下拉菜单都是静态列表，但我想在链接点击时动态制作列表，类似于一个函数调用来填充列表单击链接时的下拉菜单。我发现的是：

<li class='has-sub'><a href='#'><span>Products</span></a>
  <ul>
     <li><a href='#'><span>Product 1</span></a></li>
     <li><a href='#'><span>Product 2</span></a></li>
     <li class='last'><a href='#'><span>Product 3</span></a></li>
  </ul>

但我想用动态列表替换上面代码（Product1，Product2，Product3）中的内部列表。

我正在制作以下列表

document.getElementById("listPaths").innerHTML += "<ul style='list-style-type:circle;color: white' class='cl-effect-1'><br/><br/><br/><br/><br/><li>" + "<a href='#' style='text-decoration: none;' onclick=" + "'getRoutesList(" + countList + ");'>" + "Path " + countList + "</a>" + "</li></ul>";

我希望在点击链接时创建一个填充菜单列表的函数。我无法使用innerHTML在listPaths中插入内部列表。

Answer 1

以下是工作样本：

http://jsfiddle.net/q1hrf314/

<input type="button" onclick="updateList()" value="Update List"/>

<ul>
    <li id="listPaths">
        <ul>
     <li><a href='#'><span>Product 1</span></a></li>
     <li><a href='#'><span>Product 2</span></a></li>
     <li class='last'><a href='#'><span>Product 3</span></a></li>
  </ul>
    </li>
</ul>


var countList = 1;
function getRoutesList(countList) {
    alert('countList = ' + countList);
}

function updateList(){
document.getElementById("listPaths").innerHTML += "<ul style='list-style-type:circle;color: white' class='cl-effect-1'><br/><br/><br/><br/><br/><li>" + "<a href='#' style='text-decoration: none;' onclick=" + "'getRoutesList(" + countList + ");'>" + "Path " + countList + "</a>" + "</li></ul>";
}

下拉菜单中的动态列表

1 个答案: