如何将导航链接移至下拉列表中

Question

我有一个下拉菜单，当我单击下拉菜单时，会显示“注销”；关联。我想添加另一个名为“个人资料”的链接这样当我单击下拉菜单时，它会为我提供注销和配置文件。

我正在努力做到这一点。我有“个人资料”在导航栏的侧面，但无法让配置文件选项卡进入下拉菜单：

        <li class="nav-item dropdown">

        <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>

            {{ Auth::user()->name }} <span class="caret"></span>

        </a>

           <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">

            <a class="dropdown-item" href="{{ route('logout') }}"

               onclick="event.preventDefault();

                             document.getElementById('logout-form').submit();">

                {{ __('Logout') }}

            </a>

            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">

                @csrf

            </form>

    </li>

    <li class="nav-item">

    <a class="nav-link " href="{{ route('product.shoppingCart')}}">Cart

    <span class = "badge badge-primary">{{ Session::has('cart') ? Session::get('cart')->totalQty : ''}}

    </a>

    </li>

    <li class="nav-item">

    <a class="nav-link " href="{{ route('posts.profile')}}">Profile

    </a>

</li>

Answer 1

问题是您应该将个人资料链接放在 div 和 dropdown-menu 类中，并为其指定一个 dropdown-item类，而不是给它一个 nav-item 类并将其放在其他导航栏项目旁边。我应该说导航栏代码相当混乱。我尝试清理一下并解决了您的问题。您已为下拉菜单打开了 <div> 标记，但尚未使用 </div> 关闭它。<li class="nav-item dropdown">    <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>                        {{ Auth::user()->name }} <span class="caret"></span>    </a>    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">        <a class="dropdown-item" href="{{ route('posts.profile')}}">Profile        </a>        <a class="dropdown-item" href="{{ route('logout') }}"                   onclick="event.preventDefault();                 document.getElementById('logout-form').submit();">                {{ __('Logout') }}        </a>    </div>    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">        @csrf    </form></li><li class="nav-item">    <a class="nav-link " href="{{ route('product.shoppingCart')}}">Cart        <span class = "badge badge-primary">{{ Session::has('cart') ? Session::get('cart')->totalQty : ''}}    </a></li>

Answer 2

只是您的下拉列表中的此个人资料<li class="nav-item dropdown"><a id="navbarDropdown" class="nav-link dropdown-toggle" href="{{ route('posts.profile')}}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>Profile&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ Auth::user()->name }} <span class="caret"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="dropdown-item" href="{{ route('logout') }}"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;onclick="event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById('logout-form').submit();">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ __('Logout') }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @csrf&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link " href="{{ route('product.shoppingCart')}}">Cart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class = "badge badge-primary">{{ Session::has('cart') ? Session::get('cart')->totalQty : ''}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>