How to Implement html-php cascading menus without ajax

The effect of website navigation is similar to the following: I searched and found that all requests sent by ajax are linked. My requirement is not to send a request, but to write it directly in the PHP or html file, and then implement the drop-down effect through jquery. The array of directory navigation is as follows: level0 indicates layer 1st, followed by le...

The effect of website navigation is similar:

I searched and found that all requests sent by ajax are linked. My requirement is not to send a request, but to write it directly in the PHP or html file, and then implement the drop-down effect through jquery.
The directory navigation array is as follows: level = 0 indicates layer 1st, followed by level = 1/2 ...... Indicates the sub-menu of Layer 2.

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 advanced [parent_id] => 3 [level] => 1) [3] => Array ([cat_id] => 4 [cat_name] => PHP [parent_id] => 0 [level] => 0 ))

The html code is as follows:

  
  
 
   
Homepage
  
   
"> 
  
  

Reply content:

The effect of website navigation is similar:

I searched and found that all requests sent by ajax are linked. My requirement is not to send a request, but to write it directly in the PHP or html file, and then implement the drop-down effect through jquery.
The directory navigation array is as follows: level = 0 indicates layer 1st, followed by level = 1/2 ...... Indicates the sub-menu of Layer 2.

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 advanced [parent_id] => 3 [level] => 1) [3] => Array ([cat_id] => 4 [cat_name] => PHP [parent_id] => 0 [level] => 0 ))

The html code is as follows:

  
  
 
   
Homepage
  
   
"> 
  
  

Without ajax, all the data is read at a time, but the hide show effect must be Javascript. There are several ways to make the data into json in php and call show hide in js, you can also directly display all arrays on the page as the link default hide, and then click the show icon.

--- The following describes how to generate html for the array on the page first, but Judge the show/hide according to different class values.
Check all layers and change the original array key of 0, 1, and 2 to the attribute of each group of data as follows:

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

Attaches values to each layer of array keys, all generated,Different classes are generated on link based on different key values.By default, all hides are displayed. click which button to display. Several if elseif else operations are completed. Because each group of data has keys, you can easily determine which button corresponds to the group of data.

Check them all before display, but do not display them by default using js. Click to display them again.

Isn't it clear that you mean to implement such an infinitely hierarchical tree menu?