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

Question

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

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

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

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

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

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

建立了许多具有主干的水疗站点，因为我通常只需要导航，所以 Angular 似乎有点矫枉过正，但我​​从来没有深入处理过 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 的一大优点，因为你有两种方式的数据绑定(bind)，唯一需要保持状态同步的是使用相同的范围变量。例如:

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

元素的大版本和小版本都有“事件”类，因为它们都绑定(bind)到同一个变量中。

编辑:

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