如何隐藏页面里面的左边菜单栏？在线等。。。
0
最佳答案
0
你这网页框架是什么？iframe，还是一般的Web form 母板页？
简单的话，可以用jQuery控制菜单的显隐性，隐藏掉菜单以后，还要 resize剩余的内容。
还有一种办法：把这个菜单做成一个浮动层，当菜单隐藏掉，不用考虑剩余内容的自适应问题。。
收获园豆：15
你好，这个我以前和同事一起搞的一段代码，你看看：
</head> <body> <form id="form1" runat="server"> <div id="divOpaque"> </div> <div class="headtop"> <uc2:Top ID="Top2" runat="server" /> </div> <div id="contentArea"> <div id="ra" class="resizableArea"> <div id="raLeft" class="leftSection"> <uc1:LeftMenu ID="LeftMenu2" runat="server" /> </div> <div id="raSplitter" class="splitter" ondblclick="ra_OpenCollapse('raSplitter','raLeft');" onmouseout="HighlightSplitterBar(this.id,1);" onmouseover="HighlightSplitterBar(this.id,0);" onmouseup="ra_resizeStop()" onmousedown="ra_resizeStart(event,this,'raLeft')" title="Click and drag to resize."> </div> <div id="raRight" class="rightSection"> <div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </div> </div> </div> </form> </body>
是不是应该从"ra_OpenCollapse('raSplitter','raLeft');"这里入手呢？
@无 影: 你这个不是一个母板页吗？有没有用ajax，如果没有用的话，你点击菜单里的某一个连接时，整个页面都会刷新的。那么你在页面加载完毕的时候，将这个菜单隐藏掉。
如果你用ajax的话，你就在点击这个页面后，先隐藏菜单，在打开连接的页面。。
欢迎讨论。。
@jone_e:
对，这个就是母版页。
隐藏这个菜单栏的代码是放在母版页里面还是在我打开的那个页面？
@jone_e:
function CloseMenu() {
var objDiv = document.getElementById("raLeft");
objDiv.style.display = "none";
}
if (!IsPostBack) { ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "script", "CloseMenu()", false); }
这样也不行，居然找不到那个DIV。
@无 影: 你这样是不行的。如果要用getElementById()函数，则必须让所有的document元素加载完毕以后才可以。
不知道你有没有用过jQuery。jQuery的代码如下：
$(function(){
$("#raLeft").css("display","none");
})
把上面的代码放在head标签里，同时添加对jQuery文件的引用。如果你没有jQuery框架，在网上下载一个。很多的。。
@jone_e:
你好，我按照你的方法试了一下，但是出现这个错误，我把这段脚本分别放在母版页里面和我新建的那个页面里面，都是这个错误，麻烦帮忙看看，感谢。
@无 影: 你确认你已经加过jQuery的引用了吗？
1 <head runat="server"> 2 <link href="../CSS/dd.css" rel="Stylesheet" /> 3 <link href="../js/Theme_Cupertino/cssUI.css" rel="Stylesheet" /> 4 5 <script type="text/javascript" src="../js/jquery/jquery-1.8.1.min.js"></script> 6 7 <asp:ContentPlaceHolder ID="head" runat="server"> 8 </asp:ContentPlaceHolder> 9 </head>
就行第5行显示的那样？ 而且要把对jQuery的引用放在我上次给你的函数的上面。
@jone_e:
你好，我的项目里面有JQuery的js文件，母版页里面的完整代码如下，麻烦你看看那：
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Main.master.cs" Inherits="Main" %> <%@ Register Src="UserControls/LeftMenu.ascx" TagName="LeftMenu" TagPrefix="uc1" %> <%@ Register Src="UserControls/Top.ascx" TagName="Top" TagPrefix="uc2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <link rel="Stylesheet" type="text/css" href="css/common.css" /> <script src="Scripts/jquery.js" type="text/javascript"></script> <script src="Scripts/layout.js" type="text/javascript"></script> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> <script language="javascript" type="text/javascript"> $(function() { $("#raLeft").css("display", "none"); }) </script> </head> <body> <form id="form1" runat="server"> <div id="divOpaque"> </div> <div class="headtop"> <uc2:Top ID="Top2" runat="server" /> </div> <div id="contentArea"> <div id="ra" class="resizableArea"> <div id="raLeft" class="leftSection" > <uc1:LeftMenu ID="LeftMenu2" runat="server" /> </div> <div id="raSplitter" class="splitter" ondblclick="ra_OpenCollapse('raSplitter','raLeft');" onmouseout="HighlightSplitterBar(this.id,1);" onmouseover="HighlightSplitterBar(this.id,0);" onmouseup="ra_resizeStop()" onmousedown="ra_resizeStart(event,this,'raLeft')" title="Click and drag to resize."> </div> <div id="raRight" class="rightSection"> <div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </div> </div> </div> </form> </body> </html>
JQuery的代码我截了一部分图，如下：
@无 影: 到这里下载一个高版本的jQuery插件吧，包括中文版帮助文档！
如果还出现错误，那你就alert($("#raLeft")),看弹出的是什么。当你不清楚jQuery执行的结果是不是你想要的的时候，你就alert("")，抛出jQuery执行的结果。
@jone_e:
好的，非常感谢你的耐心指导，我下载一个最新的版本试试看，如果有问题我再请教你，再次感谢！！
@jone_e:
你好，你给我的那个链接好像下载不了，我在网上找了一个新的JQuery，引用之后还是出现同一个错误，
<script src="Scripts/jquery-1.8b1.js" type="text/javascript"></script>
我把那段脚本放在母版页里面和我新建的页面都不行。
<head id="Head1" runat="server"> <link rel="Stylesheet" type="text/css" href="css/common.css" /> <%--<script src="Scripts/jquery.js" type="text/javascript"></script>--%> <script src="Scripts/jquery-1.8b1.js" type="text/javascript"></script> <script src="Scripts/layout.js" type="text/javascript"></script> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> <script language="javascript" type="text/javascript"> $(function() { $("#raLeft").css("display", "none"); }) </script> </head>
@无 影: 你可以看看这个连接：http://forums.asp.net/t/1485083.aspx/1?Microsoft+JScript+runtime+error+Object+expected
首先可以确定的是：this error occur when you refer an object by document.getElementById when the object doesn't exist.
看这个帖子的最后一条评论，或许对你有帮助。如果还有问题，继续讨论。
@无 影: 如果你不介意的话，把代码发过来，我看能不能找到问题。
@无 影: 我看了你的代码，你的代码里有UpdatePanel，jQuery绑定的事件在UpdatePanel里在页面第一次加载的时候有效，当UpdatePanel里的web Controller 与服务器进行数据交换（从服务器回去内容更新）以后，jQuery绑定的事件就被UpdatePanel刷新掉了。
另外就你说的mircrosoft runtime Error这个问题，你发给我的文件是不能调试的，我帮不了你。你还是看看我发给你的那个连接。不过我可以帮你做一个页面加载完毕以后，自动隐藏菜单的效果。我一会儿给你发上来。
@jone_e:
好的，你太热心了，真的很感谢！！麻烦你晚一点将你做的例子给我一个链接！！
@无 影: 我的文件连接地址：http://files.cnblogs.com/zeq-jone/PageLoadDivHide.rar。如果还是不能下载，联系我。
@jone_e:
Jone_e,谢谢了，文件可以下载，我正在参考你的程序，先把帖子结了！！
@jone_e:
Jone_e,问题已经解决了，原因就是我那个JQuery的问题，我换成你给我的那个JQuery就可以了，我用你给我的那个JQuery文件替换掉我自己的那个文件，就是不知道对其它的功能有没有什么影响。谢谢你的帮助。
@无 影: 呵呵呵，总算解决了。。
其他回答(2)
0
控制其left属性就可了
0
找到双击时触发的方法，把它写到body的onload里去