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

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

                </a>

                    <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">

            </li>