Question

动态菜单存在一个问题，特别是从html转换为laravel中的循环

HTML解决方案：

<!-- begin snippet: js hide: false console: true babel: false -->

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
</style>
</head>
<body>
   
<div class="container">
  <h2>Multi-Level Dropdowns</h2>
  <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
  <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

</body>
</html>

而我在Laravel中的代码如下：

<nav class="navbar navbar-fixed-top" id="sectionsNav">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar" style="color:rgb(0, 0, 0)"></span>
                <span class="icon-bar" style="color:rgb(0, 0, 0)"></span>
                <span class="icon-bar" style="color:rgb(0, 0, 0)"></span>
            </button>
      <div class="ripple-container"></div>
        </div>

        <div class="collapse navbar-collapse" id="navigation-example">
            <ul class="nav navbar-nav navbar-right">
              @foreach ($menus as $key => $item)
                            @if ($item['parent'] != 0)
                                @break
                            @endif
                            @include('partials.menu-item', ['item' => $item])
                        @endforeach
                @auth
                   <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown"  data-hover="dropdown">{{auth()->user()->email}}<b class="caret"></b></a>
                        <ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="dLabel">
                            <li><a href="{{ route('dashboard')}}">Dashboard</a></li>
                            <li><a href="{{ route('logout') }}"
                                        onclick="event.preventDefault();
                                                 document.getElementById('logout-form').submit();">
                                        Cerrar Sesion
                            </a></li>
                            <form id="logout-form" method="POST" action="{{route('logout')}}">
                                {{csrf_field()}}

                            </form>

                        </ul>
                    </li>
                @else
                  <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Iniciar Sesion<b class="caret"></b></a>
                      <ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="dLabel">
                           <li><a href="{{ route('login') }}">Login</a></li>
                           <li><a href="{{ route('register') }}">Registrar</a></li>
                      </ul>
                  </li>
                @endauth

            </ul>
        </div>


    </div>
  </nav>
  <div class="section-space"></div>

问题出在这部分，因为我无法确定如何将html解决方案传递给laravel中的循环

我到目前为止在laravel中拥有的菜单超过2个级别就会变得有点

@if ($item['submenu'] == [])
    <li>
        <a href="{{ url($item['url']) }}" target="{{$item['target']}}">{{ $item['name'] }} </a>
    </li>
@else
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ $item['name'] }} <span class="caret"></span></a>
        <ul class="dropdown-menu sub-menu">
            @foreach ($item['submenu'] as $submenu)
                @if ($submenu['submenu'] == [])
                    <li><a href="{{ url($submenu['url']) }}" target="{{$submenu['target']}}">{{ $submenu['name'] }} </a></li>
                @else
                    @include('partials.menu-item', [ 'item' => $submenu ])
                @endif
            @endforeach
        </ul>
    </li>
@endif

enter image description here

laravel中的动态菜单，将html传送到循环

0 个答案: