在 SPA 站点中保持 2 个导航菜单同步

Question

首先，我主要是一名后端开发人员。

建立一个有 2 个导航的网站。主导航与主页等内容和子导航与关于我们，联系我们等..

引导 XS 视图和常规视图之间的导航变化足够大，因此需要 2 个完全不同的菜单代码。我想让它们保持同步，所以如果有人点击 >xs 中的子导航，然后重新调整为 xs，正确的导航仍然突出显示。或者反之亦然。

即主导航在>xs 中有4 个子导航，但在xs 中它变成一个下拉菜单并有6 个子导航。因此，无论哪种方式都需要一些自定义逻辑。

我的想法是使用 url 中的哈希来跟踪当前的导航/子导航。当 xs 中的导航展开时，读取哈希 url 并更改突出显示/展开的内容。由于单击任何地方都会折叠任何子导航下拉菜单，因此除了在展开子导航时展开/突出显示当前内容之外，我看不到任何其他方式。

这么简单，处理这个问题的最佳方法是什么？我习惯于在我的 spa 网站上使用骨干网，我认为它不能处理这个问题，我也可以通过 JS 想出很多方法来做到这一点，或者也许 Angular 有一个很好的方法来处理它。

建立了许多带骨干的水疗站点，因为我通常只需要导航，所以角度看起来有点矫枉过正，但我​​从来没有深入处理过角度，也许它会更好地处理这个问题。

任何想法/建议将不胜感激。希望这一切都有意义。

我知道这很多，但提前谢谢。希望这是有道理的。

部分代码按要求： 切换导航

            <div class="navbar-left visible-xs LogoLarge" style="margin: 0; padding: 0; margin-top: 1px; text-align: center; margin-left: 87px;">
                <a href="#"><img src="~/Images/Logo.gif" height="45" /></a>
                <div class="" style="float: right; margin-top: 3px; margin-right: 16px; ">
                    <a class="btn" href="#" style="">
                        <i class="icon-shopping-cart-white" style=""></i>
                    </a>
                </div>
            </div>
            <div class="navbar-left visible-sm LogoSm" style="padding-top: 0; margin-top: 5px;"><a href="#about"><img src="~/Images/Logo007700.jpg" height="40" /></a></div>
            <div class="navbar-left hidden-sm hidden-xs LogoLarge" style="margin-top: 0; margin-left: 15px;"><a href="#about"><img src="~/Images/Logo007700.jpg" height="50" /></a></div>
        </div>

        <!-- Expanded Main Menu -->
        <div class="collapse navbar-collapse " id="navbar-main-collapse">
            <ul class="nav navbar-nav" style="">
                <li class="active" style=""><a href="#Home" id="HomeNav" onclick="ChangeTab(this)" data-toggle="tab"><span>H</span>OME</a></li>
                <li style=""><a href="#Wiki" id="WikiNav" onclick="ChangeTab(this)" data-toggle="tab"><span>W</span>IKI</a></li>
                <li><a href="#MySetup" id="MySetupNav" onclick="ChangeTab(this)" data-toggle="tab"><span>M</span>Y <span>S</span>ETUP</a></li>
                <li class=""><a href="#Store" id="StoreNav" onclick="ChangeTab(this)" data-toggle="tab"><span>S</span>TORE</a></li>
            </ul>
            <div class="navbar-right hidden-xs" style="margin-top: 3px;">
                <div>
                    <a class="btn" href="#" style="margin-top: 1px; margin-right: -1px; padding: 0; ">
                        <i class="icon-profile-dark" style=""></i>
                    </a>
                    <a href="#" class="account" style=""><span>A</span>CCOUNT</a>
                    <a class="btn" href="#" style="margin-top: 1px; margin-right: 16px; ">
                        <i class="icon-shopping-cart-dark" style=""></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- Secondary Expanded Menu -->
        <div class="collapse navbar-collapse second-menu" id="navbar-sub-collapse" style="">
            @Html.Partial("~/Views/Shared/_SecondaryMenu.cshtml")
        </div>


        <!--Collapsed Slide Menu -->
        <div class="navbar-default side-collapse in visible-xs slide-menu" style="" id="slideMenu">
            <nav role="navigation" class="navbar-collapse" style="padding: 0; text-align: left;">
                <ul class="nav navbar-nav" style="width: 100%; margin: 0 0 0 0; ">
                    <!--Home Drop down-->
                    <li class="dropdown navSlide">
                        <a href="#Home" class="dropdown-toggle" data-toggle="dropdown" id="HomeNavSlide" name="HomeNavSlide" onclick="ChangeTab(this)" role="button" aria-haspopup="true" aria-expanded="false"><span>H</span>OME<i class="fa fa-chevron-down"></i></a>
                        <ul class="dropdown-menu" id="xxxy">
                            <li class="active" style=""><a href="#About" data-toggle="tab" data-target="HomeNav">About</a></li>
                            <li style=""><a href="#" data-toggle="tab">News</a></li>
                            <li style=""><a href="#" data-toggle="tab">Mission</a></li>
                            <li style=""><a href="#" data-toggle="tab" id="HomeSlideForums" data-target="#HomeForums">Forums</a></li>
                        </ul>
                    </li>

                    <!--Wiki Drop Down-->
                    <li class="dropdown navSlide">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="WikiNavSlide" onclick="ChangeTab(this)" role="button" aria-haspopup="true" aria-expanded="false"><span>W</span>IKI<i class="fa fa-chevron-down"></i></a>

                        <ul class="dropdown-menu" id="WikiNavSub">
                            <li class="active" style=""><a href="#About" data-toggle="tab" id="Wikia">A</a></li>
                            <li class="" style=""><a href="#About" data-toggle="tab" id="Wikib">B</a></li>
                            <li class="" style=""><a href="#About" data-toggle="tab" id="WikiC">C</a></li>
                        </ul>
                    </li>

                </ul>
            </nav>

        </div>
        <!-- /.navbar-collapse -->
    </div>
</nav>

var sideslider = $('[data-toggle=collapse-side]'); var sel = sideslider.attr('data-target'); sideslider.click（功能（事件）{ $(sel).toggleClass('in'); $("#HomeNavSlide").dropdown('toggle'); });

Answer 1

这实际上是 angularjs 的一大优点，因为您有两种数据绑定方式，唯一需要保持状态同步的就是使用相同的作用域变量。例如：

<div class="navbar1">
  <div ng-class="{'active': vm.foo}">Large item</div>
</div>

<div class="navbar2">
  <div ng-class="{'active': vm.foo}">Small Item</div>
</div>

项目的大版本和小版本都有“活动”类，因为它们都绑定到同一个变量中。

编辑：

哦，我明白了，您没有绑定到模型或在导航栏代码的任何地方使用角度。当您对菜单的状态没有任何编程访问权限时，要在两个不同版本的菜单之间保持一致的状态并不容易。你可能会改变这一点。我建议利用 ui-bootstrap 的 on-toggle(open) 来设置布尔值的打开/关闭状态，然后通过添加 open 类（如 <div ng-class="{'open':aboutUsMenuOpen}">）在每个菜单项的两个实例上使用它