我有一个包含动态菜单项的母版页,当我展开菜单中的标题项时,如何使页面大小合适? 这是我的HTML代码:
<div id="divHader" class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="uiSideMenu" class="nav navbar-nav side-nav">
<li class="active">
<a href="/Default.aspx"><i class="fa fa-fw fa-dashboard"></i>Home</a>
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound1">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("HeaderMenuId")%>' Visible="false" ></asp:Label>
<a href="javascript:;" data-toggle="collapse" onclick ="full_screen()" data-target='#<%# Eval("HeaderMenuId")%> '><i class="fa fa-fw fa-arrows-v"></i> <%# Eval("HeadItemText")%> <i class="fa fa-fw fa-caret-down"></i></a>
<ul id='<%# Eval("HeaderMenuId")%>' class="collapse">
<asp:Repeater ID="Repeater2" runat="server">
<ItemTemplate>
<li >
<asp:Label ID="PID" runat="server" Text='<%# Eval("tblMenuItemID")%>' Visible="false" ></asp:Label>
<a href="<%# Eval("MenuItemLink")%>"><%# Eval("MenuItemName")%></a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</ItemTemplate>
</asp:Repeater>
</li>
</ul>
</div>
我正在使用JavaScript来保持其大小=菜单大小+标题大小:
jQuery(document).ready(function ($) {
$(window).bind("load resize", function () {
//alert($("divHader").height());
topOffset = $("#divHader").height() + $("Footer").height();
width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
if (width < 768) {
$('div.navbar-collapse').addClass('collapse')
//topOffset = 100; // 2-row-menu
} else {
$('div.navbar-collapse').removeClass('collapse')
}
height = (this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height;
height = height - topOffset;
if (height < 1)
height = 1;
if (height > topOffset) {
$("#page-wrapper").css("min-height", (height) + "px");
}
if (height < $("#uiSideMenu").height()) {
$("#page-wrapper").css("min-height", ($("#uiSideMenu").height()) + "px");
//alert($("#page-wrapper").height());
}
if (height > topOffset) {
$("#uiSideMenu").css("top", ($("#divHader").height()) + "px");
}
});
});
function showHeight(element, height) {
$("div").text("The height for the " + element + " is " + height + "px.");
}
$("#getp").click(function () {
showHeight("paragraph", $("#divHader").height());
});
但它不起作用!