Javascript 树菜单？在JS中？

我需要一份树状菜单。但是我需要一个带有列表的下拉框，而不是一个展开/折叠的列表视图，当你点击一个元素时，我需要更新这个框（第一个条目是“后退”），这样菜单就会保持在一个整洁的小对话框中

---

这个菜单有名字吗？有人知道我在哪里可以得到代码来做这件事吗？

我可以想到几个jQuery插件，它们会破坏您的目的。然而，我会推荐，这正是它听起来的样子。下拉框会就地更新，使用很酷的横向幻灯片动画，并包含一个“后退”按钮（根据需要）。最后，如果你不想要任何动画，你可以尝试调整插件的许多选项。例如，将

crossSpeed

设置为

0

可能会起作用。

Adam是对的，jQuery提供了一系列您可以使用的菜单。实际上，虽然这是一个有点小的问题，但编写它的代码将占用jQuery代码的十分之一的空间。如果可能的话，我会说不使用jQuery编写它

最有效的方法是使用JS OOP（Javascript面向对象），但这是一个令人困惑的话题，这是可以理解的

基本上，你只需要像这样的东西：

function drillDown(){
     //Any code that multiple drilldowns 
     //  might need on the same page goes here

     //Every instance of a drillDown will 
     //  instantiate a new set of all functions/variables
     //  which are contained here

     //A reference to the parent node the dropdown is placed in
     this.parent;
     //A reference to the div the dropdown is incased in
     this.object;

     //Returns a reference to this object so it can be
     //  stored/referenced from a variable in it's
     //  superclass
     return this;
}

//Prototype Functions

//prototypes are shared by all 
//  instances so as to not double up code

//this function will build the dropdown
drillDown.prototype.build = function(parent){
    //Too lazy to write all this, but build a div and your select box
    //  Add the select box to the div, 
    //  Add the div to the parent (which is in your document somewhere) 
    var divEle = document.createElement('div');
    var inputBox = document.createElement('input');

    //code code code

    divEle.appendChild(inputBox);
    parent.appendChild(divEle);
}

//this function loads the newest dataset of
drillDown.prototype.loadNewDataSet = function(data){
    //first clear out the old list
    //  remember we have a reference to both the
    //  'object' and 'parent' by using 
    //  this.object and this.parent

    //load the data, we are going to use the text from
    //  the select boxes to load each new dataset, woo eval();
    //  If you didn't know, eval() turns a string into JS code,
    //  in this case referencing an array somewhere
    var dataSet = eval(data);


    //then loop through your list adding each new item
    for(item in dataSet){
        //add item to the list
        //change the .onClick() of each one to load the next data set

        // a la  -> 
        selectItem.onClick = function(){this.loadNewDataSet(item);};

        //if you name your datasets intelligently, 
        //  say a bunch of arrays named for their respective selectors, 
        //  this is mad easy
    }
}

//Then you can just build it
var drillDownBox = new drillDown();
drillDownBox.build(document.getElementsByTagName('body')[0]);
drillDownBox.loadNewDataSet("start");

//assuming your first dataset array is named "start",
//  it should just go

---

顺便说一句，Adam也这么说了，但没有明确说明，这被称为向下钻取。

我会寻找jQuery解决方案，并将其作为标签添加到本文和标题中。