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事件）时，菜单应该会出现，然后在下次点击时菜单会消失。

问题：当我点击第1次和第2次时它起作用。但第三次菜单不再显示。谁能告诉我为什么会这样？

Answer 1

您的问题可能是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一起使用（这样做更好，而不是在pageload之后使用hide（））：

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

});

Answer 2

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

}）;

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

菜单下拉列表不能用于连续点击

2 个答案: