1 
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();
    });
});

我正在尝试menu()从 jQueryUI 显示。出现的问题如下。

结构：如上面的代码所示，我在元素上附加了一个下拉菜单，.action菜单本身命名为#login_menu.

期望的行为：当我单击mousedown按钮上的（事件）时.action，菜单应该出现，然后在下次单击时菜单应该消失。

问题：当我单击第一次和第二次时，它起作用了。但第三次菜单不再出现。谁能告诉我这是为什么？

4

2 回答 2

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（这样做比在页面加载后使用 hide() 更好）：

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

此代码将使其按您希望的方式工作。请注意，我将 mousedown() 与 jQuery 的 click() 交换，并将“返回 false”与 jQuery 的 preventDefault() 交换。我还使用可链接对象方法设置菜单的位置，而不是像您那样通过变量访问它。

$(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();
    });

});​​​
于 2012-12-10T12:38:58.493 回答
0 
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();
});

});

刚刚找到解决方案...此代码有效...也许有人仍然可以指出为什么前面的代码不起作用...但是这次唯一的区别是我只定位了一次。所以在每次切换导致问题之前重新定位它......上面提到......这是正常的吗？

于 2012-12-10T11:58:59.020 回答