Question

我需要一个树状菜单。但是你不需要展开/折叠的列表视图，我需要一个带有列表的下拉框，当你点击一个元素时，我需要更新的框（第一个条目是'Back'），所以菜单保持在一个整洁的小对话框中

这个菜单有名字吗？有谁知道我可以在哪里获得代码来执行此操作？

Answer 1

我可以想到几个可以扼杀你的目的的jQuery插件。但是，我会推荐jQuery iPod Style Drilldown Menu (Newer Version)，这听起来就像它。下拉框更新到位，使用一个很酷的侧面幻灯片动画，并包含一个“后退”按钮（如您所愿）。最后，如果您不想要任何动画，可以尝试调整插件的许多选项。例如，将crossSpeed设置为0可能会有效。

Answer 2

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

顺便说一句，亚当也说过，但并不明确，这被称为深入研究。

树菜单？在JS？

2 个答案: