在我在这里发布我的问题之前,请注意我真的想将javascript和css保留为该菜单。
现在我的问题。 我有一个JavaScript菜单,我在asp.net页面遇到问题,我有问题产生正确的html更正确。
如果有人能指出我正确的方向,我真的很感激。
html中的菜单如下:
<!-- HOME -->
<div class="menu_item" onmouseover="hide_all_panels();">
<a href="/default.aspx">Home</a>
</div>
<!-- ABOUT SITE -->
<div id="trigger1" onmouseover="show_panel('0');">
<div class="menu_item">
<a href="/about_us.aspx">About Us</a>
</div>
<div class="hidden_div">
<!-- ABOUT WEB SITE POPOUT -->
<div class="menu" id="popout1">
<div class="menu_item">
<a href="/frequently_asked_questions.aspx">Frequently Asked Questions</a>
</div>
<div class="menu_item">
<a href="/our_team.aspx">Our Team</a>
</div>
<div class="menu_item">
<a href="/our_board.aspx">The Board</a>
</div>
</div>
</div>
</div>
<a href="/blog/">Blog</a>
</div>
<!-- CONTACT US -->
<div class="menu_item" onmouseover="hide_all_panels();">
<a href="/contact.aspx">Contact Us</a>
</div>
正如你所看到的, divs 对于没有孩子的单个菜单是不对称的我只是链接包裹到div ,但是对于带有孩子的菜单我有一个带有一个触发器div的菜单,另外还有两个主要的div。
我试图在asp.net端为这个菜单添加类似的东西(现在不要注意链接namings,它们并不重要):
<asp:Repeater ID="rpt_Menu" runat="server" OnItemDataBound="rpt_Menu_DataBound">
<ItemTemplate>
<asp:Panel ID="pnl_MainSubmenuDiv" runat="server" Visible="false" Enabled="false">
<div id="trigger<%= index %>" onmouseover="show_panel('<%= index %>');">
</asp:Panel>
<div class="menu_item" onmouseover="hide_all_panels();">
<a href="/default.aspx"><%# Eval("menu_name") %></a>
</div>
<asp:HiddenField ID="hdn_Id" runat="server" Value='<%# Eval("menu_id") %>' />
<asp:Repeater ID="rpt_SubMenu" runat="server">
<ItemTemplate>
<div class="menu" id="popout<%= index %>">
<div class="menu_item">
<a href="/about_us.aspx"><%# Eval("menu_name") %></a>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<asp:Panel ID="pnl_MainSubmenuClose" runat="server" Visible="false" Enabled="false">
</div>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
并且背后的代码非常简单,没有什么特别之处,我所做的只是绑定第一个转发器内的第二个转发器,使面板可见或不可见:
protected void rpt_Menu_DataBound(object obj, RepeaterItemEventArgs e)
{
int parent_id = Int32.Parse(((HiddenField)e.Item.FindControl("hdn_Id")).Value.ToString());
using (SamaraDataContext mycity = new SamaraDataContext())
{
var subMenu = from sm in mycity.tbl_menus
where (sm.menu_parent == parent_id)
select new
{
menu_id = sm.menu_id,
menu_name = sm.menu_name
};
int count = 0;
foreach (var item in subMenu)
{
count++;
}
if (count > 0)
{
((Panel)e.Item.FindControl("pnl_MainSubmenuDiv")).Visible = true;
((Panel)e.Item.FindControl("pnl_MainSubmenuClose")).Visible = true;
((Repeater)e.Item.FindControl("rpt_SubMenu")).DataSource = subMenu.ToList();
((Repeater)e.Item.FindControl("rpt_SubMenu")).DataBind();
this.index++;
}
}
}
}
然而我的问题是,即使隐藏了面板,面板也会生成div,这会破坏所有html结构。
我真的不喜欢把div放在代码里面。
答案 0 :(得分:2)
这一节在这里有一件事:
<asp:Panel ID="pnl_MainSubmenuClose" runat="server" Visible="false" Enabled="false">
</div>
</asp:Panel>
如果Visible设置为true,将呈现无效的HTML,从而可能会搞砸JavaScript和CSS交互。
这样就会出现:
<div id="something_something_pnl_MainSubmenuClose">
</div>
</div>
当Panel控件呈现它们所包围的任何内容时。所以想办法解决这个问题,你可能会解决你的问题。
答案 1 :(得分:1)
要补充blesh的答案,请使用PlaceHolder
控件而不是Panel
。占位符不会围绕内容呈现HTML。