jquery - 如何使 Bootstrap 导航链接可单击以重定向到桌面上的新 URL，但可单击以在移动设备上展开手风琴菜单？

Question

我正在尝试在较小的屏幕上交换 Bootstrap 的手风琴菜单导航链接的功能。我认为这是我描述它的最准确的方式，但我在这里可能是错的。

我目前有这个，用于导航栏：

    <header>
<!--Navigation
------------------------------------------------------------------------>
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-white navbar-boxshadow mt-sm-5 mt-5 pt-0">
    <div class="container">
        <!--Navigation Logotype-->
        <a class="navbar-brand pr-4" href="/" alt="Link to Home Page">
            <img class="img-fluid" src="images/navigation/logo.svg" />
        </a>
        <!--Navigation Hamburger Menu (Smaller Screens)-->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
            aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!--Navigation Links-->
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <!--Navigation Links (Left)-->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="dropdown-02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Top Navigation Link</a>
                    <ul class="dropdown-menu" aria-labelledby="dropdown-02">
                        <!---->
                        <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Accordion Menu Link 01<i class="fa fa-angle-right"></i></a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Accordion Menu Link 01.A</a></li>
                                <li><a class="dropdown-item" href="#">Accordion Menu Link 01.B</a></li>
                                <li><a class="dropdown-item" href="#">Accordion Menu Link 01.C</a></li>
                            </ul>
                        </li>
                        <!---->
                        <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Accordion Menu Link 02<i class="fa fa-angle-right"></i></a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Accordion Menu Link 02.A</a></li>
                                <li><a class="dropdown-item" href="#">Accordion Menu Link 02.B</a></li>
                            </ul>
                        </li>
                        <!---->
                        <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Accordion Menu Link 03<i class="fa fa-angle-right"></i></a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Accordion Menu Link 03.A</a></li>
                                <li><a class="dropdown-item" href="#">Accordion Menu Link 03.B</a></li>
                            </ul>
                        </li>
                        <!-- -->
                        <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Accordion Menu Link 04<i class="fa fa-angle-right"></i></a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Accordion Menu Link 04.A</a></li>
                                <li><a class="dropdown-item" href="#">Accordion Menu Link 04.B</a></li>
                            </ul>
                        </li>
                        <!-- -->
                        <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Accordion Menu Link 05</a>
                            <!--
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#"></a></li>
                                <li><a class="dropdown-item" href="#"></a></li>
                            </ul>
                            -->
                        </li>
                    </ul>
                </li>
            </ul>
            <!---->
            <ul class="navbar-nav mr-0">
                <li class="nav-item d-none d-xs-none d-sm-none d-md-none d-lg-inline-block d-xl-inline-block">
                    <a class="nav-link font-icon" href="#" title=""><span class="d-none d-xs-none d-sm-none d-md-none d-lg-none d-lg-inline-block d-xl-inline-block"><img alt="" title="" src="" /></span></a>
                </li>
                <li class="nav-item d-none d-xs-none d-sm-none d-md-none d-lg-inline-block d-xl-inline-block">
                    <a class="nav-link font-icon" href="" title=""><span class="d-none d-xs-none d-sm-none d-md-none d-lg-none d-lg-inline-block d-xl-inline-block"><img alt="" title="" src="" /></span></a>
                </li>
            </ul>
        </div>
    </div>
</nav>

我想做的是让第一级手风琴菜单（例如，Accordion Menu Link 01，正如我在上面标记的那样）项目可以点击以驱动到新的 URL - 但仅限于桌面设备。第一级手风琴菜单项目前在更大的屏幕上具有悬停功能，以便在滚动时显示第二级手风琴菜单项。

但是 - 我希望这些相同的第一级手风琴菜单项在移动设备上按下时打开第二级手风琴菜单项。然后我可以尝试在这些屏幕的某个断点下方添加一个新菜单项，这将使用户能够访问在单击大屏幕时起作用的链接。

链接到当前可视化理想情况下应该如何工作的东西可能更容易，我在https://www.node4.co.uk找到了一个示例。主导航下的服务菜单项提供了一个我希望实现的工作示例。

提前对任何可以告诉我这是一个快速解决方案的人表示大爱，我只是很密集。

标签： jquerycsstwitter-bootstrapnavbar