ASP.NET 使面板在单击超链接时可见（同时也促使页面导航回发）
我可能会问不可能的问题，但让我列出我的问题：
我在 MasterPage 中有一个菜单，它使用图像和鼠标悬停鼠标悬停事件来进行设计。 在其中一个菜单选项上，我需要在单击父菜单项时显示一组子菜单选项。 菜单项本身也需要导航到指定的 url。
我最初尝试使用 AJAX 手风琴面板，但由于我只有一个手风琴面板，它始终显示子菜单项并且不会折叠。
我还尝试将选项放在 div 中并通过 javascript 设置显示。 这有效，但一旦页面导航回发发生，就会被覆盖。
这是来源：
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Src="LeadHeader.ascx" TagName="LeadHeader" TagPrefix="uc1" %>
<%@ Register Src="~/LeadFooter.ascx" TagName="LeadFooter" TagPrefix="uc2" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var revert = new Array();
var inames = new Array('home', 'whoweare', 'whatwedo','ourapproach', 'ourvalues', 'contact');
// Preload
if (document.images) {
var flipped = new Array();
for(i=0; i< inames.length; i++) {
flipped[i] = new Image();
flipped[i].src = "images/"+inames[i]+"2.jpg";
}
}
function over(num) {
if(document.images) {
revert[num] = document.images[inames[num]].src;
document.images[inames[num]].src = flipped[num].src;
}
}
function out(num) {
if(document.images) document.images[inames[num]].src = revert[num];
}
function ShowHide(elementId)
{
var element = document.getElementById(elementId);
if(element.style.display != "block")
{
element.style.display = "block";
}
else
{
element.style.display = "none";
}
}
function UpdateText(element)
{
if(element.innerHTML.indexOf("Show") != -1)
{
element.innerHTML = "Hide Details";
}
else
{
element.innerHTML = "Show Details";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
<uc1:LeadHeader ID="LeadHeader" runat="server" />
</asp:ContentPlaceHolder>
<div id="nav">
<div class="menu-item">
<a href="Default.aspx">
<img src="Images/home.jpg" alt="home" id="home" onmouseover="over(0)" onmouseout="out(0)"
class="right" /></a>
</div>
<div class="menu-item">
<a href="AboutUs.aspx">
<img src="Images/whoweare.jpg" alt="who we are" id="whoweare" onmouseover="over(1)"
onmouseout="out(1)" class="right" /></a>
</div>
<%-- <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="Accordion1" runat="server" AutoSize="None" FadeTransitions="true"
TransitionDuration="350" FramesPerSecond="40" RequireOpenedPane="false" >
<Panes>
<cc1:AccordionPane runat="server">
<Header>--%>
<div class="menu-item">
<a href="WhatWeDo.aspx">
<img src="Images/whatwedo.jpg" alt="what we do" id="whatwedo" onmouseover="over(2)"
onmouseout="out(2)" class="right" onclick="ShowHide('divDetails');UpdateText(this);" /></a></div>
<%--/Header>
<Content>--%>
<div id="divDetails" style="display:none;">
<a href="management.aspx" title="Management Development">Management Development</a><br />
<a href="leadership.aspx" title="Leadership Development">Leadership Development</a><br />
<a href="personal.aspx" title="Personal Development">Personal Development</a><br />
<a href="realteams.aspx" title="Team Building / Facilitation">Team Building & Facilitation</a><br />
<a href="coaching.aspx" title="Coaching">One to One Coaching</a>
</div>
<%-- </Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
--%>
<div class="menu-item">
<a href="OurApproach.aspx">
<img src="images/ourapproach.jpg" alt="our approach" id="ourapproach" onmouseover="over(3)"
onmouseout="out(3)" /></a>
</div>
<div class="menu-item">
<a href="OurValues.aspx">
<img src="images/ourvalues.jpg" alt="our values" id="ourvalues" onmouseover="over(4)"
onmouseout="out(4)" /></a>
</div>
<div class="menu-item">
<a href="ContactUs.aspx">
<img src="images/ContactUs.jpg" alt="contact us" id="contactus" onmouseover="over(5)"
onmouseout="out(5)" /></a>
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
<uc2:LeadFooter ID="LeadFooter" runat="server" />
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
I may be asking the impossible but let me set out my problem:
I have a menu in a MasterPage which uses images and mouseover mouseout events for design purposes.
On one of the menu options I need to display a set of sub menus options on the click of the parent menu item. The menu item itself also needs to navigate to a specified url.
I was originally trying to use an AJAX accordion panel but as I only had one accordion panel it was always displaying the sub menu items and was not collapsing.
I have also tried putting the options in a div and setting the display via javascript. This worked but then was overwritten once the page navigation postback occurred.
Here is the source:
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Src="LeadHeader.ascx" TagName="LeadHeader" TagPrefix="uc1" %>
<%@ Register Src="~/LeadFooter.ascx" TagName="LeadFooter" TagPrefix="uc2" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var revert = new Array();
var inames = new Array('home', 'whoweare', 'whatwedo','ourapproach', 'ourvalues', 'contact');
// Preload
if (document.images) {
var flipped = new Array();
for(i=0; i< inames.length; i++) {
flipped[i] = new Image();
flipped[i].src = "images/"+inames[i]+"2.jpg";
}
}
function over(num) {
if(document.images) {
revert[num] = document.images[inames[num]].src;
document.images[inames[num]].src = flipped[num].src;
}
}
function out(num) {
if(document.images) document.images[inames[num]].src = revert[num];
}
function ShowHide(elementId)
{
var element = document.getElementById(elementId);
if(element.style.display != "block")
{
element.style.display = "block";
}
else
{
element.style.display = "none";
}
}
function UpdateText(element)
{
if(element.innerHTML.indexOf("Show") != -1)
{
element.innerHTML = "Hide Details";
}
else
{
element.innerHTML = "Show Details";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
<uc1:LeadHeader ID="LeadHeader" runat="server" />
</asp:ContentPlaceHolder>
<div id="nav">
<div class="menu-item">
<a href="Default.aspx">
<img src="Images/home.jpg" alt="home" id="home" onmouseover="over(0)" onmouseout="out(0)"
class="right" /></a>
</div>
<div class="menu-item">
<a href="AboutUs.aspx">
<img src="Images/whoweare.jpg" alt="who we are" id="whoweare" onmouseover="over(1)"
onmouseout="out(1)" class="right" /></a>
</div>
<%-- <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<cc1:Accordion ID="Accordion1" runat="server" AutoSize="None" FadeTransitions="true"
TransitionDuration="350" FramesPerSecond="40" RequireOpenedPane="false" >
<Panes>
<cc1:AccordionPane runat="server">
<Header>--%>
<div class="menu-item">
<a href="WhatWeDo.aspx">
<img src="Images/whatwedo.jpg" alt="what we do" id="whatwedo" onmouseover="over(2)"
onmouseout="out(2)" class="right" onclick="ShowHide('divDetails');UpdateText(this);" /></a></div>
<%--/Header>
<Content>--%>
<div id="divDetails" style="display:none;">
<a href="management.aspx" title="Management Development">Management Development</a><br />
<a href="leadership.aspx" title="Leadership Development">Leadership Development</a><br />
<a href="personal.aspx" title="Personal Development">Personal Development</a><br />
<a href="realteams.aspx" title="Team Building / Facilitation">Team Building & Facilitation</a><br />
<a href="coaching.aspx" title="Coaching">One to One Coaching</a>
</div>
<%-- </Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
--%>
<div class="menu-item">
<a href="OurApproach.aspx">
<img src="images/ourapproach.jpg" alt="our approach" id="ourapproach" onmouseover="over(3)"
onmouseout="out(3)" /></a>
</div>
<div class="menu-item">
<a href="OurValues.aspx">
<img src="images/ourvalues.jpg" alt="our values" id="ourvalues" onmouseover="over(4)"
onmouseout="out(4)" /></a>
</div>
<div class="menu-item">
<a href="ContactUs.aspx">
<img src="images/ContactUs.jpg" alt="contact us" id="contactus" onmouseover="over(5)"
onmouseout="out(5)" /></a>
</div>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
<uc2:LeadFooter ID="LeadFooter" runat="server" />
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果我没看错的话，您需要导航按钮将您引导到另一个页面并打开子菜单以显示更多选项。
最简单的方法是在主页上创建整个子菜单并将其隐藏在全局样式表中。 然后，每个页面都可以包含一行 css 来显示适当的面板，无需 JavaScript。
更有效的方法是使用 this.Master.Page.FindControl("myPanelId") 在服务器端操作必要的项目。
我无法准确地想象你在做什么，但我已经使用 jQuery 手风琴菜单做了类似的事情。 我的服务器端代码构建了一个包含链接和适当图像的嵌套无序列表。 我让悬停事件切换手风琴面板，以便我仍然可以单击任何链接来转到相应的页面。 如果这更接近您想要的，我可以为您提供必要的代码/CSS 的一般概念。
希望有帮助。
If I read this correctly you need the nav buttons to direct you to another page and open a sub-menu to display further options.
The easiest way to do this would be to create the entire sub menu on the master page and hide it in your global style sheet. Each page could then contain a line of css to show the appropriate panel no JavaScript required.
A more efficient way would be to use this.Master.Page.FindControl("myPanelId") to manupulate the necessary item server-side.
I can't visualize exactly what you are doing but I have used jQuery accordion menus to do something similary. My server side code built a nested unordered list with links and the appropriate images. I let the hover event switch the accordion panel so that I could still click on any of the links to go to the corresponding page. If this is closer to what you want I can give you a general idea of the code / css necessary.
Hope that helps.