菜單下拉菜單不能連續點擊

Question

function toggleMenu() { 
    var mwidget = jQuery("#login_menu").menu("widget"); 
    var visible = mwidget.is(":visible"); 
    alert(visible); 

    mwidget.position({ 
     my:'top', 
     at:'bottom', 
     of:$(".action") 
    }); 

    $("#login_menu").menu("refresh"); 
    $('#login_menu').menu().toggle(); 

    var visible = mwidget.is(":visible"); 
    alert(visible); 

    return false; 
} 

jQuery(document).ready(function() { 
    jQuery("#login_menu").menu().hide(); 

    jQuery(".action").mousedown(function() { 
     toggleMenu(); 
    }); 
}); 

我試圖從jQueryUI中顯示menu()。出現的問題如下。

結構：如上面代碼所示，我在元素.action上附加了下拉菜單，菜單本身名爲#login_menu。

期望的行爲：當我點擊（mousedown事件）按鈕.action時，應出現菜單，然後在下一次單擊菜單應該消失。

問題：當我點擊第一次和第二次它的作品。但第三次菜單不再顯示。誰能告訴我爲什麼這是？

Answer 1

jQuery(document).ready(function() { 
function toggleMenu() 
{ 
    var mwidget = jQuery("#login_menu").menu("widget"); 

    var visible = mwidget.is(":visible"); 
    alert(visible); 

    $('#login_menu').menu().toggle(); 

    var visible = mwidget.is(":visible"); 
    alert(visible); 

    return false; 
}; 

function posnMenu() 
{ 
var mwidget = jQuery("#login_menu").menu("widget"); 

    alert("positioning the menu"); 

    mwidget.position({ 
     my:'top', 
     at:'bottom', 
     of:jQuery(".action") 
    }); 

return false; 
}; 

jQuery("#login_menu").menu().hide(); 

posnMenu(); 

jQuery(".action").mousedown(function() { 
    toggleMenu(); 
}); 

}）;

剛剛找到解決方案...此代碼工作...也許有人仍然可以指出爲什麼早期的一個不工作...但這次唯一的區別是，我只定位一次。因此，在每次切換前重新定位會導致上述問題......這是正常的嗎？

Answer 2

您的問題可能是var mwidget = jQuery("#login_menu").menu("widget")：每次用戶單擊操作鏈接時，它會多次初始化菜單。

假設你的HTML看起來像這樣：

<a href="#" class="action">Action button</a> 

<ul id="login-menu"> 
    <li><a href="#">Login</a></li> 
    <li><a href="#">Register</a></li> 
    <li> 
     <a href="#">Settings</a> 
     <ul> 
      <li><a href="#">1</a></li> 
      <li><a href="#">2</a></li> 
     </ul> 
    </li> 
</ul>​​​​​​​​​​​​​​​​​​​​​ 

隨着這個CSS（它是更好的方式來這樣做的，而不是使用頁面加載後隱藏（））：

​#login-menu { 
    display: none; 
    width: 200px 
}​​​​​​​ 

這代碼會使它按照你想要的方式工作。注意我用jQuery的click（）替換了mousedown（），用jQuery的preventDefault（）替換了「return false」。我還使用可鏈式對象方法來設置菜單的位置，而不是像你所做的那樣通過變量來訪問它。

$(document).ready(function(){ 

    $("#login-menu") 
     .menu() 
     .menu("option", "position", { 
      my:'right top', 
      at:'right' }); 

    $(".action").click(function(e) { 
     e.preventDefault(); 
     $('#login-menu') 
      .menu("refresh") 
      .toggle(); 
    }); 

});​​​