html-php cascading menus without Ajax how to implement

The effect of site navigation is similar to the following:

I searched and found that Ajax was sending requests to implement linkage. My request is not to send a request, directly in a PHP file or HTML file, and then through jquery to achieve the pull-down effect.
An array of directory navigation is as follows: Level=0 represents the 1th floor, followed by the level=1/2 ... Represents a submenu of the 1th level.

Array(    [0] => Array        (            [cat_id] => 3            [cat_name] => JavaScript            [parent_id] => 0            [level] => 0        )    [1] => Array        (            [cat_id] => 5            [cat_name] => Jquery            [parent_id] => 3            [level] => 1        )    [2] => Array        (            [cat_id] => 6            [cat_name] => JS高级            [parent_id] => 3            [level] => 1        )    [3] => Array        (            [cat_id] => 4            [cat_name] => PHP            [parent_id] => 0            [level] => 0        ))

The HTML code is as follows:

  
   
   
 
    
首页
  
    
"> 
  
   

Reply content:

The effect of site navigation is similar to the following:

I searched and found that Ajax was sending requests to implement linkage. My request is not to send a request, directly in a PHP file or HTML file, and then through jquery to achieve the pull-down effect.
An array of directory navigation is as follows: Level=0 represents the 1th floor, followed by the level=1/2 ... Represents a submenu of the 1th level.

Array(    [0] => Array        (            [cat_id] => 3            [cat_name] => JavaScript            [parent_id] => 0            [level] => 0        )    [1] => Array        (            [cat_id] => 5            [cat_name] => Jquery            [parent_id] => 3            [level] => 1        )    [2] => Array        (            [cat_id] => 6            [cat_name] => JS高级            [parent_id] => 3            [level] => 1        )    [3] => Array        (            [cat_id] => 4            [cat_name] => PHP            [parent_id] => 0            [level] => 0        ))

The HTML code is as follows:

  
   
   
 
    
首页
  
    
"> 
  
   

Without Ajax, all the data are read out at once, but hide show the effect must be JS, there are several ways, you can PHP data into JSON, in the JS call show Hide, you can also directly put all the array first on the page display as link default hide, And then according to the point which show which.

---The following is an array to generate HTML on the page first, but according to the different class values to judge Show/hide
Each layer is detected, the original with 0, 1, 2 of the array key to use the attributes of each set of data as can, as follows:

array(    'l1' => array(        key1 => value1,        key2 => value2,        key3 => value3    ),    'l2' => array(        key1 => value1,        key2 => value2,        key3 => value3    )    .......);

To each layer of the array key is attached to the value, all generated, 根据key value 不同在link上生成不同的class the default all hide, and then click on which button to show which bar, a few if elseif else is done, because each group of data has a key, you can simply determine which button corresponding to the set of data.

Before displaying them all, just use JS default does not show them, and then click to display them

is not very clear what you mean, is to achieve such an infinite level of the tree menu?

                            
   3, "cat_name" = "JavaScript", "parent_id" = 0, "level" and 0), Array ("cat_id" = 5, "Cat_name" =& Gt "Jquery", "parent_id" = 3, "level" = 1), Array ("cat_id" = 6, "cat_name" = "JS advanced", "parent_id" = > 3, "Level" = 1), Array ("cat_id" and "7", "Cat_name" and "JS Advanced more advanced 1", "parent_id" and "6", "the" and "the" =&G T 3), Array ("cat_id" = 8, "cat_name" = "JS Advanced more advanced 2", "parent_id" = 6, "level" = 3), Arra  Y ("cat_id" = 9, "cat_name" = "JS Advanced more advanced 3", "parent_id" = 6, "level" = 3), Array ("cat_id" = 4, "Cat_name" = "php", "parent_id" = 0, "level" = 0), Array ("cat_id" = "cat_name" and "=" PHP high Class 1 "," parent_id "= 4," level "= 0), Array (" cat_id "=" cat_name "+" PHP advanced 2 "," parent_id "=&G T        4, "level" = 0), Array ("cat_id" and "cat_name" = "PHP advanced 3", "parent_id" and "+ 4", "+" + 0) );//Create TreeShape Menu Function Createtree (& $arr, $parent _id) {$hide = "";            if ($parent _id! = 0) {$hide = "hidden";            } $funcName = __function__;            $ul = "";            $li = ""; for ($i = 0; $i < count ($arr), $i + +) {if ($arr [$i] ["parent_id"] = = $parent _id) {$ch                    ILD = $funcName ($arr, $arr [$i] [' cat_id ']); $li. = "\ r \ n
{$arr [$i] ["Cat_name"]} {$child}
\ r \ n "; }} if ($li! = "") {$ul = "
  
  
 
   

     {$li} 
   
 
  
";        } return $ul;        } Echo createtree ($arr, 0); ?>    

1. Load all the data in advance and assign it to a JS variable. Each time you select a cascading menu, the data is read from this variable.
2. Doing this would be equivalent to requesting the data for the AJAX request to be requested at one time.

PHP echo a JSON data to JS variable

Pre-generated JSON format data in the page, passed to JS on it.

