默认情况下，SharePoint Rio Linx 引导移动菜单不会折叠

Question

在这里需要一些帮助。移动菜单默认不会折叠。我注意到asp控件没有传递CSS，但是它传递给默认关闭的侧边栏菜单。我必须以 .ms-core-navigation 为目标才能使折叠/展开工作，但在第一次单击时它会出现故障并认为它已经展开，因此它会重新动画展开。

这是母版页代码：

    <div class="navbar navbar-inverse top-nav-bar">
                            <div class="container">
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle" id="navbar-toggle" data-toggle="collapse" data-target=".ms-core-listMenu-horizontalBox>ul">
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                    <a class="navbar-brand" href="#">Top Menu</a>
                                </div> <!-- end navbar-header -->
                                <SharePoint:AjaxDelta ID="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server">
                                    <SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" ID="topNavigationDelegate">
                                        <Template_Controls>
                                            <asp:SiteMapDataSource
                                                ShowStartingNode="False"
                                                SiteMapProvider="SPNavigationProvider"
                                                ID="topSiteMap"
                                                runat="server"
                                                StartingNodeUrl="sid:1002" />
                                        </Template_Controls>
                                    </SharePoint:DelegateControl>
                                    <asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server">
                                        <SharePoint:AspMenu
                                            Width="100%"
                                            CssClass="collapse navbar-collapse"
                                            ID="TopNavigationMenu"
                                            runat="server"
                                            EnableViewState="false"
                                            DataSourceID="topSiteMap"
                                            AccessKey="<%$Resources:wss,navigation_accesskey%>"
                                            UseSimpleRendering="true"
                                            RenderingMode="List"
                                            Orientation="Horizontal"
                                            StaticDisplayLevels="2"
                                            AdjustForShowStartingNode="true"
                                            MaximumDynamicDisplayLevels="2"
                                            SkipLinkText="">
<%--                                            <StaticMenuStyle CssClass="style1" />
                                            <DynamicMenuStyle CssClass="style2" />
                                            <DynamicMenuItemStyle CssClass="style3" />
                                            <StaticMenuItemStyle CssClass="style4" />--%>
                                        </SharePoint:AspMenu>
                                    </asp:ContentPlaceHolder>
                                </SharePoint:AjaxDelta>
                            </div> <!-- end container -->                                
                         </div> <!-- end navbar-inverse -->

这是默认情况下在移动设备中的输出 html：

    <div class="navbar navbar-inverse top-nav-bar">
                            <div class="container">
                                <div class="navbar-header">
                                    <button type="button" class="navbar-toggle" id="navbar-toggle" data-toggle="collapse" data-target=".ms-core-listMenu-horizontalBox>ul">
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                    <a class="navbar-brand" href="#">Top Menu</a>
                                </div> <!-- end navbar-header -->
                                <div id="DeltaTopNavigation" class="ms-displayInline ms-core-navigation" role="navigation">



    <div id="zz10_TopNavigationMenu" class="nav noindex ms-core-listMenu-horizontalBox">
        <ul id="zz11_RootAspMenu" class="root ms-core-listMenu-root static">
            <li class="static selected"><a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" title="Exponent Client Site" href="/Pages/Home.aspx" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Project Portal</span><span class="ms-hidden">Currently selected</span></span></a><ul class="static">
                <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/Pages/Project-Dashboard-Forms.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Project Dashboard</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/Pages/Reports.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Reports</span></span></a></li>
            </ul></li><li class="static ms-verticalAlignTop ms-listMenu-editLink ms-navedit-editArea"><span class="ms-navedit-editSpan" id="zz10_TopNavigationMenu_NavMenu_Edit"><a id="zz10_TopNavigationMenu_NavMenu_EditLinks" class="ms-navedit-editLinksText" href="#" onclick="g_QuickLaunchMenu = null; EnsureScriptParams('quicklaunch.js', 'QuickLaunchInitEditMode', 'zz10_TopNavigationMenu', 1, 3, 0, '\u002f'); cancelDefault(event); return false;" title="Edit Links"><span class="ms-displayInlineBlock"><span class="ms-navedit-editLinksIconWrapper ms-verticalAlignMiddle"><img class="ms-navedit-editLinksIcon" src="/_catalogs/theme/Themed/6236AB79/spcommon-B35BB0A9.themedpng?ctag=11" alt="Edit Links"></span><span class="ms-metadata ms-verticalAlignMiddle">Edit Links</span></span></a><span id="zz10_TopNavigationMenu_NavMenu_Loading" class="ms-navedit-menuLoading ms-hide"><a id="zz10_TopNavigationMenu_NavMenu_GearsLink" href="#" onclick="HideGears(); return false;" title="This animation indicates the operation is in progress. Click to remove this animated image."><img id="zz10_TopNavigationMenu_NavMenu_GearsImage" src="/_layouts/15/images/loadingcirclests16.gif?rev=40" alt="This animation indicates the operation is in progress. Click to remove this animated image."></a></span><div id="zz10_TopNavigationMenu_NavMenu_ErrorMsg" class="ms-navedit-errorMsg">

            </div></span></li>
        </ul>
    </div>


</div>
                            </div> <!-- end container -->                                
                         </div>

这是第一次点击前的顶部导航按钮代码：

<button type="button" class="navbar-toggle" id="navbar-toggle" data-toggle="collapse" data-target=".ms-core-listMenu-horizontalBox>ul">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>

第一次单击后，它会重新设置动画，并且按钮代码没有变化。一旦我再次单击它以折叠它，它就会折叠，这是按钮代码：

<button type="button" class="navbar-toggle collapsed" id="navbar-toggle" data-toggle="collapse" data-target=".ms-core-listMenu-horizontalBox>ul">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>

提前致谢！

Answer 1

尝试在您的母版页中添加以下代码：

<div id="navBackground" class="navbar navbar-static-top">
        <div id="navContainer" class="container">
            <div class="ms-dialogHidden">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <SharePoint:SPLinkButton runat="server" NavigateUrl="~sitecollection/" CssClass="navbar-brand">Your website brand name</SharePoint:SPLinkButton>
                </div>
                <div class="collapse navbar-collapse" id="bs-navbar-collapse">
                    <div class="ms-displayInline ms-core-navigation ms-dialogHidden">
                        <asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
                            <PublishingNavigation:PortalSiteMapDataSource ID="topSiteMap" runat="server" EnableViewState="false" SiteMapProvider="GlobalNavigationSwitchableProvider" StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="false" />
                            <SharePoint:AspMenu ID="TopNavigationMenu" runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="&lt;%$Resources:wss,navigation_accesskey%&gt;" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="1" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="2" SkipLinkText="" />
                        </asp:ContentPlaceHolder>
                    </div>
                </div>
            </div>
        </div>
    </div>

然后你需要在 JS 中准备好文档时修改一些元素： 我为此做了两个 JS 模块：

(function (module) {
    /**
     * Make top nav conform to bootstrap
     */
    module.initializeNavBarMenu = function () {
        // Get the generated sharepoint id
        var spListMenuId = jQuery("#navBackground .ms-core-listMenu-horizontalBox").attr("id");

        jQuery("#" + spListMenuId).removeClass("ms-core-listMenu-horizontalBox");
        jQuery("#" + spListMenuId + ">ul").removeClass("root ms-core-listMenu-root static").addClass("nav navbar-nav");
        jQuery("#" + spListMenuId + ">ul>li.static").removeClass("static");
        // All dropdown menu
        jQuery("#" + spListMenuId + " ul>li.dynamic-children").removeClass("dynamic-children").addClass("dropdown");

        // Transform header term navigation to normal term nav
        // With Link (page, subsite, etc...)
        jQuery("#" + spListMenuId + " ul>li>a>span").replaceWith(function(){
            var elmt = jQuery(this).find("span.menu-item-text")[0];
            return elmt != null ? elmt.outerHTML : "";
        });
        // Without Link (folder)
        jQuery("#" + spListMenuId + " ul>li>span").replaceWith(function(){
            var elmt = jQuery(this).find("span.menu-item-text")[0];
            return elmt != null ? '<a href="">' + elmt.outerHTML + '</a>' : "";
        });

        jQuery("#" + spListMenuId + " ul>li.dropdown>a").removeClass().addClass("dropdown-toggle ms-core-listMenu-item").attr("aria-expanded","false").attr("aria-haspopup","true").attr("role","button").attr("data-toggle","dropdown");
        jQuery("#" + spListMenuId + " ul>li>ul").removeClass().addClass("dropdown-menu");
    }
    /**
     * Auto Hover for sub-menus
     */
    module.openOnHoverNavBarSubMenus = function () {
        // Same value of minimal width befor the transformation of menu
        // --> Show 'src/less/mixins/_mediaQuery.less' for the list of screen
        var minWidth = 768; // 768px is for tablet screen

        function toggle (event)
        {
            jQuery(this).toggleClass("open");
        }

        if (jQuery( document ).width() >= minWidth)
        {
            // Remove click and tap
            jQuery('.dropdown [data-toggle=dropdown]')
                .on('click tap', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                });

            jQuery('.dropdown').on('mouseenter mouseleave click tap', toggle);
        } else {
            // Add click event for bootstrap sub-menu
            jQuery('ul.dropdown-menu [data-toggle=dropdown]')
                .on('click tap', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                    jQuery(this).parent().siblings().removeClass('open');
                    jQuery(this).parent().toggleClass('open');
                });
        }
    }

    return module;
})(MyModule.Init);