在这里需要一些帮助。默认情况下，移动菜单不会折叠。我注意到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>
感谢提前！
答案 0 :(得分：0)
尝试在母网页中添加以下代码：
<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="<%$Resources:wss,navigation_accesskey%>" 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);