树形菜单？在JS？

Question

我需要一份树状菜单。但我需要一个包含列表的下拉框，而不是一个展开/折叠的列表视图，当你点击一个元素时，我需要更新这个框(第一个条目是'Back')，这样菜单就会停留在一个整洁的小对话框中。

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

Answer 1

我可以想到几个jQuery插件，它们会破坏你的目的。但是，我建议使用jQuery iPod Style Drilldown Menu (Newer Version)，它听起来就像这样。下拉框在适当的位置更新，使用很酷的横向幻灯片动画，并包括一个“后退”按钮(根据您的需要)。最后，如果你不想要任何动画，你可以尝试调整插件的许多选项。例如，将crossSpeed设置为0可能会起作用。

Answer 2

亚当是对的，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也说过，但并不明确，这被称为向下钻取。