Question

我在创建List（Ul li）时遇到困难，事实上这是一个在运行时学习的菜单。

像

.Computers items
.Keyboard
.Cd rom
.office Equipment
.item 1
.item 2
.item 3
.item 4
.item 5

问题是，当我试图在运行时添加新的

（点击任何类别，例如计算机后），然后它在同一个（父）中添加新项目任何人都可以帮助我。感谢

我正在使用此代码

$("#cssmenu ul").append('<li class="active has-sub" id="'+ id.toString()+'" onclick="My_Func($(this).html(),this.id)"><a href="#"><span>'+txt +'</span></a>');

Answer 1

您应首先在li中包装第一级a的内容（即您想要点击并加载数据的内容）。这样可以避免多级li定位的挫败感。同时为您的id提供唯一的li，以便加载相应的数据。

然后，绑定到a上的点击事件并创建ul。将数据加载到li并将其附加到此ul。完成后，将此ul附加到当前点击的li。

此代码段会告诉您：

出于本演示的目的，我们从对象字典中加载数据，该字典包含每个类别的内容作为数组。

＆＃13;

/* For the purpose of this demo, data is stored in this object */
var items = {
	"computers": ['Computer 1', 'Computer 2', 'Computer 3'],
	"equipment": ['Eq 1', 'Eq 2'],
	"peripherals": ['CD', 'Printer', 'etc']
};

/* Target the a which are direct children of li which are direct children of list ul  */
$("ul#list > li > a").on("click", function(e) {
  
    // When a is clicked, we get the id of parent li
    var id = $(this).parent().attr("id");
  
    // Create a ul
    var $wrap = $("<ul />");
  
    // Loop thru data, or loaded thru other means
    for (var idx in items[id]) {
      
        // Create li from data and append to ul
        $wrap.append("<li>" + items[id][idx] + "</li>");
    }
  
    // append this ul to the current li
    $(this).parent().append($wrap);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
    <li id="computers"><a href="#">Computers</a></li>
    <li id="equipment"><a href="#">Equipment</a></li>
    <li id="peripherals"><a href="#">Peripherals</a></li>
    <li>Others</li>
</ul>

＆＃13;

使用Jscript创建列表菜单运行时

1 个答案: