Question

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

使用2个导航构建网站。主要导航与家庭等，以及关于我们的子导航，联系我们等..

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

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

我的想法是使用网址中的哈希来跟踪当前的nav / subnav。当扩展xs中的nav时，读取哈希URL并更改突出显示/展开的内容。由于点击任何地方都会折叠任何子导航下拉列表，除了展开/突出显示子导航时的当前内容之外，我没有任何其他方法。

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

建造了许多带有骨干的水疗中心，因为我通常只需要导航，所以角度似乎有点矫枉过正，但我从来没有处理角度的深度，也许它会更好地处理这个。

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

我知道这很多，但提前完成了。希望它有意义。

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

            <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（function（event）{ $（SEL）.toggleClass（ 'IN'）; $（ “＃HomeNavSlide”）下拉菜单（ '切换'）。 }）;

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>

该项目的大小版本均具有“活跃”功能。 class，因为它们都绑在同一个变量中。

编辑：

哦，我知道，您没有绑定到模型或在导航栏代码中的任何位置使用角度。当您没有对其状态进行任何编程访问时，在两个不同版本的菜单之间保持一致状态并不容易。你可以改变它。我建议点击ui-bootstrap的on-toggle(open)来设置布尔值的打开/关闭状态，然后通过添加open在每个菜单项的两个实例上使用它像<div ng-class="{'open':aboutUsMenuOpen}">

这样的课程

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

1 个答案:

编辑：