是否可以強制彈出菜單而不是鼠標懸停而觸發？

Question

我使用了Orientation = Horizo​​ntal的ASP.NET Menu控件。在鼠標懸停中出現彈出式菜單會讓人不爽，如果您想要點擊菜單正下方的某個按鈕，將鼠標移動到菜單上時，會導致它出現意外。然後，菜單彈出窗口隱藏了您實際想要點擊的元素！

是否可以更改功能，以便彈出窗口需要鼠標點擊而不是鼠標懸停？

Answer 1

那麼，我自己找到了一個解決方案（一種破解...）。
此解決方案需要使用AJAX捕獲菜單項onclick回發事件，因此可以在執行實際回發時在您點擊菜單項之前將其在javascript中的客戶端中提取出來。

首先，我覆蓋由菜單控制 定義這些函數忽略鼠標懸停事件菜單彈出式視窗：

var activeMenuItem = null; 

function Menu_HoverStatic(item) { 

    // Register the active item to be able to access it from AJAX 
    // initialize postback event 
    activeMenuItem = item 

    // Apply the style formatting on mouseover (colors etc). 
    // This was also called in the original Menu_HoverStatic function. 
    Menu_HoverRoot(item); 

} 

function Menu_Unhover(item) { 

    activeMenuItem = null; // This is the only difference to the original 

    var node = (item.tagName.toLowerCase() == "td") ? 
    item: 
    item.cells[0]; 
    var nodeTable = WebForm_GetElementByTagName(node, "table"); 
    if (nodeTable.hoverClass) { 
     WebForm_RemoveClassName(nodeTable, nodeTable.hoverClass); 
    } 
    node = nodeTable.rows[0].cells[0].childNodes[0]; 
    if (node.hoverHyperLinkClass) { 
     WebForm_RemoveClassName(node, node.hoverHyperLinkClass); 
    } 
    Menu_Collapse(node); 
} 


// Then I added a renamed copy of the original `Menu_HoverStatic` function: 
function Menu_ClickStatic() { 
    // Pick up the active menu item that is set in the 
    // overridden Menu_HoverStatic function. 
    // In the original, the item was input parameter. 
    var item = activeMenuItem; 

    // The rest is identical to the original Menu_HoverStatic. 
    var node = Menu_HoverRoot(item); 
    var data = Menu_GetData(item); 
    if (!data) return; 
    __disappearAfter = data.disappearAfter; 
    Menu_Expand(node, data.horizontalOffset, data.verticalOffset); 
} 

然後我搶購的AJAX的onclick回發事件被觸發菜單。必須完成此操作才能取消onclick回發並顯示菜單彈出窗口。

// Get the Page Request Manager that provides all the .NET 
var prm = Sys.WebForms.PageRequestManager.getInstance(); 
// Register postback event for asyncronous AJAX postbacks 
if (prm) prm.add_initializeRequest(InitializePostback); 
function InitializePostback(sender, args) { 
    var element = args.get_postBackElement(); 
    //Check if the postback element is the menu 
    if (element.id == 'myMenu') { 
    // Name of the menu element that triggered is the postback argument 
    var postbackArguments = document.getElementById('__EVENTARGUMENT'); 
    if (postbackArguments) 
     // Check on the menu item name to pick up only the menu items that shall 
     // trigger the popout (not the items that does an actual command). 
     if (postbackArguments.value == 'MenuTopItem1' 
     || postbackArguments.value == 'MenuTopItem2' 
     || postbackArguments.value == 'MenuTopItem3') { 
     // Abort and cancel the postback 
     prm.abortPostBack(); 
     args.set_cancel(true); 
     Menu_ClickStatic(); // Call my own copy of the original function 
     return; 
    } 
    } 
} 

注：
我發現了這些功能的詳細信息，通過使用Firebug的腳本觀衆。

Answer 2

上面提供的解決方案在任何情況下都不起作用。我們也可以嘗試了這一點，它的工作在我的解決方案 -

var jq = jQuery.noConflict(); 
      jq(document).ready(function() { 
       jq(document).on('click', '#ctl_id_Here', function() { 
        Menu_HoverStatic(this); 
        Menu_HoverRoot(this); 
       }); 
       jq(document).on('click', '#ctl_id_Here', function() { 
        Menu_HoverStatic(this); 
        Menu_HoverRoot(this); 
       }); 
      });