使用laravel 5中的bootstrap进行多级导航

时间:2015-04-22 18:35:28

标签: php css twitter-bootstrap laravel-5

我使用laravel 5作为我的框架。

我有这样的类别表:

enter image description here

如果是parent_id = id

,我想将其作为多级引导菜单

这是我到目前为止所尝试的:

<ul class="nav navbar-nav navbar-right">        
    <li class="dropdown">
        <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Categories <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            @foreach( $category as $cat )
                @if( $cat->id === $cat->parent_id)
                    <ul class="dropdown-menu" role="menu">
                        <li class="dropdown-submenu">
                            <a href="{{ url( '/category', Safeurl::make( $cat->name ) ) }}" data-toggle="dropdown-toggle" aria-expanded="false">{{ $cat->name }}
                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="{{ url( '/category', [Safeurl::make( $cat->name ), Safeurl::make( $cat->name )] ) }}"></a>
                                    </li>
                                </ul>
                            </a>
                        </li>
                    </ul>
                @else
                    <li>
                        <a href="{{ url( '/category', Safeurl::make( $cat->name ) ) }}">{{ $cat->name }}</a>
                    </li>
                @endif
            @endforeach
        </ul>
    </li>
</ul>

但结果是,我得到的输出低于另一个。

我希望如果parent_id = id,它应该显示该特定ID旁边的子类别。

例如,在当前示例中,id = 6具有parent_id = 4,这意味着,引导菜单应显示Clothing旁边的子类别链接。

更新1

提交答案后,我无法显示子类别。

以下是代码:

<li class="dropdown">
    <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Categories <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
        @foreach( $category as $cat )
            <li @if($cat->childs->count()) class="dropdown" @endif>
                <a href="javascript:void(0)" @if( $cat->childs->count() ) class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" @endif>
                    {{ $cat->name }}
                    @if( $cat->childs->count() )
                        <span class="caret"></span>
                    @endif
                </a>
            @if( $cat->childs->count() )
                <ul class="dropdown-menu" role="menu">
                    @foreach( $cat->childs as $child )
                        <a href="{{url('/category', [Safeurl::make($cat->name), Safeurl::make($child->name)])}}">
                            {{ $child->name }}
                        </a>
                    @endforeach
                </ul>
            @endif
        </li>
    @endforeach
</ul>

我如何实现这一目标?

1 个答案:

答案 0 :(得分:4)

执行此操作的一种方法是在模型中添加关系

public function childs()
{
    return $this->hasMany('Category', 'parent_id', 'id');
}

在您的控制器中,只选择parent_id == 0

的类别

在你看来,你可以要求孩子:

@foreach( $category as $cat )
    <li @if($cat->childs->count()) class="dropdown" @endif>
        <a href="{{ url( '/category', Safeurl::make( $cat->name ) ) }}" @if($cat->childs->count()) class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" @endif>{{ $cat->name }} @if($cat->childs->count()) <span class="caret"></span> @endif</a>
        @if($cat->childs->count())
             <ul class="dropdown-menu" role="menu">
             @foreach($cat->childs as $child)
                 <li><a href="{{ url( '/category', [Safeurl::make( $child->name ), Safeurl::make( $child->name )] ) }}"></a></li>
             @endforeach
             </ul>
        @endif
    </li>
@endforeach