型号:
class Menu extends Model { protected $table = 'menus'; public function sub_menu(){ return $this->hasMany('App\Menu', 'parent_id'); } }
控制器:
class MenuController extends Controller { public function index() { $menus = Menu::where('parent_id', 0)->get(); return view('admin.menus.index',compact('menus')); } }
查看:
<ul>
@foreach($menus as $menu)
<li>{{ $menu->title }}
@if($menu->sub_menu->count() > 0)
<ul>
@foreach($menu->sub_menu as $sub)
<li{{ $sub->title }}</li>
@endforeach
</ul>
@endif
</li>
@endforeach
</ul>
表结构:
---------------------------------------------------------------------- id | title | parent_id ---------------------------------------------------------------------- 1 | Home | 0 ---------------------------------------------------------------------- 2 | Product1 | 0 ---------------------------------------------------------------------- 3 | Product1.1 | 2 ---------------------------------------------------------------------- 4 | Product1.1.1 | 3 ---------------------------------------------------------------------- 5 | Product1.1.2 | 3 ----------------------------------------------------------------------
它只显示2个级别,但我需要多个级别,请帮助!
您可以使用递归进行尝试,如下所示:
<ul>
@foreach($menus as $menu)
<li>
{{ $menu->title }}
@if($menu->sub_menu->count())
{!! view('admin.menus.index', ['menus' => $menu->sub_menu]) !!}
@endif
</li>
@endforeach
</ul>
当您的视图只有上述内容时,它将起作用。否则,您必须创建新的分部并递归调用它。
只是要小心,你可能会在使用递归的无限循环中结束。
问题内容: 我正在使用SmartMenus创建一个下拉菜单。但是,我想动态创建菜单。React应用程序将向API服务器查询JSON代码,并从中构建一个菜单。我试图找出一种将JSON代码转换为HTML / JSX代码的方法: 从API检索到的JSON代码如下所示: 基于此JSON数据,我想生成以下HTML / JSX代码: 鉴于我正在使用多个级别的菜单,在React中混合使用JSX和html元素的有
本文向大家介绍Bootstrap3多级下拉菜单,包括了Bootstrap3多级下拉菜单的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Bootstrap下拉菜单的具体代码,供大家参考,具体内容如下 效果图: - 需要引用bootstrap.min.css和bootstrap.min.css.js - 代码如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教
问题内容: 通过使用twitter bootstrap 2的元素,可以有一个多级下拉菜单吗?原始版本没有此功能。 问题答案: 更新的答案 更新了支持v2.1.1 *引导程序版本样式表的答案。 **但是请小心,因为此解决方案已从v3中删除 只是想指出一点,因为最新的引导程序现在默认支持多级下拉菜单,因此不再需要此解决方案。如果您使用的是旧版本,则仍然可以使用它,但对于那些已更新到最新版本(在撰写本文
问题内容: 以前,我没有对多级纯CSS下拉菜单进行过很多工作,但是现在我正在寻找最干净的方法。当我搜索了这个网上我发现了很多那名4-5岁的解决方案,我不知道是否有更好的方法来实现这一目标,而不是做一些这样的。 问题答案: .third-level-menu 我还整理了一个现场演示,可在此处使用
本文向大家介绍请使用css写一个多级的下拉菜单相关面试题,主要包含被问及请使用css写一个多级的下拉菜单时的应答技巧和注意事项,需要的朋友参考一下
本文向大家介绍vue实现多级菜单效果,包括了vue实现多级菜单效果的使用技巧和注意事项,需要的朋友参考一下 本次记录基于iview3框架实现多级菜单+vue router实现页面切换 方法一: 使用Tree 树形控件,官方文档 以官方demo为例,数据中添加URL属性,用于路由跳转,正式项目中该tree控件的数据由后端给出,需要注意的是后端给出的URL跳转地址最前一定要看清有没有"/" ,如果没有