Laravel - 为嵌套集中的每个 parent 创建 bootstrap 下拉列表
Laravel - Creating bootstrap dropdown for each parent in a nested set
我正在使用 etrepat/baum 为我在 laravel 项目中的应用程序创建类别。当我想为类别创建 bootstrap 下拉菜单时,在 blade 中使用 @foreach
时遇到问题。当结构如下时,这很好用:
<nav id="nav2" role="navigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Shop by Category<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
@foreach($catnav as $cat) @if($cat->depth == 0)
<li>
{{ HTML::link(URL::action('StoreController@getCategories', [$cat->slug]), $cat->name) }} @else($cat->depth == 1)
<ul>
<li><a href="{{ URL::to('/store/categories/' . implode('/', $cat->getAncestorsAndSelf()->lists('slug'))) }}">{{$cat->name}}</a>
</li>
</ul>
</li>
@endif @endforeach
</ul>
</li>
</ul>
</nav>
这是上面的输出:
但我不想有一个 按类别购物 下拉菜单,但我正在尝试为每个 parent 创建一个 dropdown
在 dropdown-menu
中包含 children 的类别。我试过这个结构,但是 @foreach
会弄乱布局。
<nav id="nav2" role="navigation">
<ul class="nav navbar-nav">
@foreach($catnav as $cat) @if($cat->depth == 0)
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ HTML::link(URL::action('StoreController@getCategories', [$cat->slug]), $cat->name, array('class'=>'dropdown-toggle' ,'data-toggle'=>'dropdown')) }}<span class="caret"></span></a>
@else($cat->depth == 1)
<ul class="dropdown-menu" role="menu">
<li><a href="{{ URL::to('/store/categories/' . implode('/', $cat->getAncestorsAndSelf()->lists('slug'))) }}">{{$cat->name}}</a>
</li>
@endif
</ul>
</li>
@endforeach
</ul>
</nav>
我怎样才能做到这一点?
经过漫长的一天试图解决这个问题,我得出了结论:
使用toHierarchy()
方法return查询树的嵌套集合。
使用 @foreach
循环获取所有父节点并在另一个 @foreach
中获取子节点。
使用 isRoot()
函数检查该项目是否为父项目。
使用isLeaf()
函数检查分支是否结束。
使用大量 @if
语句。
解决方案:
<nav id="nav2" role="navigation">
<ul class="nav navbar-nav">
@foreach($catnav as $item)
<li @if($item->isRoot())class ="dropdown"@endif>
@if(!$item->isLeaf())
<a @if($item->isRoot()) class="dropdown-toggle"@endif href="/store/categories/{{ $item->slug }}">
{{ $item->name }}
@if($item->isRoot()) <span class="caret"></span> @endif
</a>
@else
<a href="/store/categories/{{ $item->slug }}">{{$item->name}}</a>
@endif
@if($item->isRoot() && !$item->isLeaf())
<ul class="dropdown-menu">
@foreach($item->children as $child)
<li><a href="{{ URL::to('/store/categories/'.implode('/', $child->getAncestorsAndSelf()->lists('slug'))) }}">{{$child->name}}</a></li>
@endforeach
</ul>
@endif
</li>
@endforeach
</ul>
</nav>
这是一个 package I created to easily create Dropdown Menu 并且只关注开发。
您只需使用以下代码即可创建下拉菜单:
Blade:
{!! Dropmenu::display('MenuName') !!}
控制器:
$menu = Dropmenu::display('MenuName');
return view('name.view', ['menu' => $menu]);
我正在使用 etrepat/baum 为我在 laravel 项目中的应用程序创建类别。当我想为类别创建 bootstrap 下拉菜单时,在 blade 中使用 @foreach
时遇到问题。当结构如下时,这很好用:
<nav id="nav2" role="navigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Shop by Category<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
@foreach($catnav as $cat) @if($cat->depth == 0)
<li>
{{ HTML::link(URL::action('StoreController@getCategories', [$cat->slug]), $cat->name) }} @else($cat->depth == 1)
<ul>
<li><a href="{{ URL::to('/store/categories/' . implode('/', $cat->getAncestorsAndSelf()->lists('slug'))) }}">{{$cat->name}}</a>
</li>
</ul>
</li>
@endif @endforeach
</ul>
</li>
</ul>
</nav>
这是上面的输出:
但我不想有一个 按类别购物 下拉菜单,但我正在尝试为每个 parent 创建一个 dropdown
在 dropdown-menu
中包含 children 的类别。我试过这个结构,但是 @foreach
会弄乱布局。
<nav id="nav2" role="navigation">
<ul class="nav navbar-nav">
@foreach($catnav as $cat) @if($cat->depth == 0)
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ HTML::link(URL::action('StoreController@getCategories', [$cat->slug]), $cat->name, array('class'=>'dropdown-toggle' ,'data-toggle'=>'dropdown')) }}<span class="caret"></span></a>
@else($cat->depth == 1)
<ul class="dropdown-menu" role="menu">
<li><a href="{{ URL::to('/store/categories/' . implode('/', $cat->getAncestorsAndSelf()->lists('slug'))) }}">{{$cat->name}}</a>
</li>
@endif
</ul>
</li>
@endforeach
</ul>
</nav>
我怎样才能做到这一点?
经过漫长的一天试图解决这个问题,我得出了结论:
使用
toHierarchy()
方法return查询树的嵌套集合。使用
@foreach
循环获取所有父节点并在另一个@foreach
中获取子节点。使用
isRoot()
函数检查该项目是否为父项目。使用
isLeaf()
函数检查分支是否结束。使用大量
@if
语句。
解决方案:
<nav id="nav2" role="navigation">
<ul class="nav navbar-nav">
@foreach($catnav as $item)
<li @if($item->isRoot())class ="dropdown"@endif>
@if(!$item->isLeaf())
<a @if($item->isRoot()) class="dropdown-toggle"@endif href="/store/categories/{{ $item->slug }}">
{{ $item->name }}
@if($item->isRoot()) <span class="caret"></span> @endif
</a>
@else
<a href="/store/categories/{{ $item->slug }}">{{$item->name}}</a>
@endif
@if($item->isRoot() && !$item->isLeaf())
<ul class="dropdown-menu">
@foreach($item->children as $child)
<li><a href="{{ URL::to('/store/categories/'.implode('/', $child->getAncestorsAndSelf()->lists('slug'))) }}">{{$child->name}}</a></li>
@endforeach
</ul>
@endif
</li>
@endforeach
</ul>
</nav>
这是一个 package I created to easily create Dropdown Menu 并且只关注开发。
您只需使用以下代码即可创建下拉菜单:
Blade:
{!! Dropmenu::display('MenuName') !!}
控制器:
$menu = Dropmenu::display('MenuName'); return view('name.view', ['menu' => $menu]);