树形菜单？在 JS 中？答案

【问题标题】：Tree Menu? In JS?树形菜单？在 JS 中？
【发布时间】：2011-02-24 11:20:48
【问题描述】：

我需要一个树形菜单。但是，我需要一个带有列表的下拉框，而不是展开/折叠的列表视图，当您单击一个元素时，我需要更新该框（第一个条目是“返回”），因此菜单保持在一个整洁的小对话框中.

这个菜单有名字吗？有谁知道我在哪里可以得到代码来做到这一点？

【问题讨论】：

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

标签： javascript user-interface menu

【解决方案1】：

Adam 是对的，jQuery 提供了各种各样的菜单供您使用。实际上，这是一个微不足道的问题，编写它的代码将占用大约 jQuery 代码空间的 1/10。因此，如果可能的话，我会说不用 jQuery 来编写它。

最有效的方法是使用 JS OOP（Javascript Object-Oriented），但可以理解这是一个令人困惑的话题。

基本上你只想要这样的东西：

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

顺便说一句，亚当也说过，但没有明确，这被称为向下钻取。

【讨论】：

【解决方案2】：

我能想到几个 jQuery 插件，它们会影响你的目的。但是，我会推荐jQuery iPod Style Drilldown Menu (Newer Version)，这正是它听起来的样子。下拉框更新到位，使用酷炫的侧向滑动动画，并包括一个“返回”按钮（如您所愿）。最后，如果您不想要任何动画，您可以尝试调整插件的许多选项。例如，将crossSpeed 设置为0 可能会起作用。

【讨论】：