菜单展开单击 [英] Menu Expand on Click
本文介绍了菜单展开单击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否可以在鼠标点击时扩展菜单项而不是鼠标悬停在aspnet 3.5网站上？我使用javascript获得了一些建议，但这混淆了整个菜单本身。
如果这是不可能或不可取的，有没有其他选择？
Is it possible to expand menu items on mouse click and not on mouse hover in an aspnet 3.5 website? I got some suggestions using javascript, but that mixed up the entire menu itself.
If this is not possible or advisable, are there any alternatives?
推荐答案
我正在尝试请检查并告诉它是否有工作是不是。它为我工作。
Java脚本代码位于标签之间。
Put此代码是Aspx页面。
I am trying it please check and tell that if its work or not.Its working for me.
The Java Script Code is between the tag.
Put This code is the Aspx page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Edit._Default" %>
<!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 runat="server">
<title>Untitled Page</title>
<script>
function addClickBehavior(menuTable)
{
var tbody = menuTable.getElementsByTagName("TBODY")[0];
var tr = tbody.getElementsByTagName("TR")[0];
for(var i = 0; i < tr.childNodes.length; i++)
{
var td = tr.childNodes[i];
if(td.tagName && td.tagName.toLowerCase() == 'td')
{
var anchor = td.getElementsByTagName("A")[0];
if(anchor)
{
var onClick = td.onmouseover;
td.onclick =
(function (el, method){
return function(evt){
method.call(el);
if(window.event) {
evt = window.event
}
evt.cancelBubble = true;
};
})(td, onClick);
td.onmouseover =
(function (el){
return function(){
Menu_HoverRoot(el);
};
})(td);
//add cursor style
anchor.style.cursor = "default";
anchor.onclick = function(){return false;};
//td.onmouseout = null;
}
}
}
}
function WebForm_RemoveClassName(element, className) {
var current = element.className;
var oldLength = -1;
if (current) {
while(oldLength != current.length)
{
if (current.substring
(current.length - className.length - 1,
current.length) == ' ' + className) {
element.className =
current.substring
(0, current.length - className.length - 1);
oldLength = current.length;
current = element.className;
continue;
}
if (current == className) {
element.className = "";
oldLength = current.length;
current = element.className;
continue;
}
var index = current.indexOf(' ' + className + ' ');
if (index != -1) {
element.className =
current.substring
(0, index) +
current.substring
(index + className.length + 2, current.length);
oldLength = current.length;
current = element.className;
continue;
}
if (current.substring
(0, className.length) == className + ' ') {
element.className =
current.substring
(className.length + 1, current.length);
}
current = element.className;
oldLength = current.length;
}
}
}
function Menu_HoverRoot(item) {
var node = (item.tagName.toLowerCase() == "td") ?
item:
item.cells[0];
var data = Menu_GetData(item);
if (!data) {
return null;
}
var nodeTable = WebForm_GetElementByTagName(node, "table");
if (data.staticHoverClass) {
//avoids adding the same class twice
nodeTable.hoverClass = data.staticHoverClass;
WebForm_AppendToClassName(nodeTable, data.staticHoverClass);
}
node = nodeTable.rows[0].cells[0].childNodes[0];
if (data.staticHoverHyperLinkClass) {
node.hoverHyperLinkClass = data.staticHoverHyperLinkClass;
WebForm_AppendToClassName
(node, data.staticHoverHyperLinkClass);
}
return node;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" Height="34px" Orientation="Horizontal"
Width="869px" onprerender="Menu1_PreRender">
<Items>
<asp:MenuItem Text="Home" Value="Home">
<asp:MenuItem Text="Next Home" Value="Next Home"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="About US" Value="About US"></asp:MenuItem>
<asp:MenuItem Text="Contact" Value="Contact"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>
现在转到Cs页面点击菜单的PreRender事件并粘贴以下代码。
Now go to the Cs page click the PreRender Event of the Menu and paste the below code .
protected void Menu1_PreRender(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript
(Page.GetType(), "addClickBehavior",
"addClickBehavior(document.getElementById('" +
Menu1.ClientID + "'));", true);
}
谢谢。我希望这会有所帮助。
我已经在aspx页面中包含了Java Script部分。
Thanks.I hope this will help.
I have Inculded the Java Script portion in the aspx page itself.
这篇关于菜单展开单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
