jquery infinite cascading menu case sharing

When I saw the regional cascading menu of phpcms, I thought it was quite interesting, so I just talked about the general steps to avoid forgetting it.

The generation of regional cascading menus is generally in the areaid() function of the /data/cache_model/content_form.class.php file. However, this is just a cache and I haven’t found where it was generated yet, so it’s just a test for now. (Students who know tell me! Thank you very much)

Add

Copy code The code is as follows: function delChild(num) { $('#load_$field select').each(function(i,obj){ if (obj.id >num) $('#' obj.id).remove(); }) }

correspondingly, in /load. Modify elseif($field == 'areaid' && $value) in php

Copy code The code is as follows: $str = ' onchange="delChild('.$id.');$('#'.$value.' ').val(this.value);this.disabled=false;area_load(this.value);"> value="1">'.$LANG['please_select'].' ';

can remove the effect of "the selected area cannot be changed", and the redundant selection box will not be deleted when there are no subordinate place names. As for the traditional cascading menu, I personally feel that the transmission data is relatively large, and the connection with the database does not seem to be good, so I will not post the code.

Method 2:

Copy the code The code is as follows: $(document).ready(function(){ $('.menu li').hover(function(){ $(this).children('ul').show(); $(this).focus().addClass('focusa') },function(){ $(this).children('ul').hide(); $(this).focus().removeClass('focusa'); }); }); ul{ list-style:none; margin:0; padding:0;} .menu { height:30px; line-height:30px; } .menu li { float:left; position:relative;} /*这一级是导航*/ .menu li a { display:block; height:30px; line-height:30px; padding:0 20px; } .menu li a:hover { color:#000; background:url(img/bg1.png); } .menu li a.more { background:url(img/there.png) no-repeat 130px center; } .menu li ul { position:absolute; float:left; width:150px; border:1px solid #000; display:none;} /*这是第二级菜单*/ .menu li ul a { width:110px; } .menu li ul a:hover { background:url(img/bg1.png);} .menu li ul ul{ top:0;left:150px;}/*Starting from the third-level menu, all sub-menus are relatively offset*/ Menu one Menu one Menu 2 Menu three Menu four Menu five Menu One Menu Two Menu three Menu four Menu five Menu one Menu two Menu three Menu four Menu five Menu one Menu two Menu 3 Menu four Menu five Menu 2 Menu one Menu two Menu three Menu one Menu two Menu Three Menu one Menu two Menu 3 Menu four Menu five Menu 4 ;/li> Menu Three Menu Four Menu Five Menu one Menu 2 Menu 3

jquery infinite cascading menu case sharing_jquery