CODEWITHSUNDEEP
jqueryjquery-ui
user1102171
user1102171

Reputation: 684

Menu dropdown not working on successive clicks

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

I'm trying to show menu() from jQueryUI. The problem that comes is as follows.

Structure: as seen in the code above, I have attached a dropdown menu to the element .action and the menu itself is named #login_menu.

Desired behaviour: when I click (mousedown event) on button .action the menu should appear and then on next click the menu should disappear.

Problem: When I click 1st and 2nd time it works. But the third time the menu does not show up any more. Can anyone tell me why this is?

Upvotes: 1

Views: 175

Answers (2)

Christophe Marois
Christophe Marois

Reputation: 6729

Your problem probably is var mwidget = jQuery("#login_menu").menu("widget"): Each time a user clicks the action link, it initializes the menu several times.

Assuming your HTML looks like this:

<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>​​​​​​​​​​​​​​​​​​​​​

Along with this CSS (it is way better to do it that way rather than using hide() after pageload):

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

This code would make it work the way you want it to be. Notice that I swapped mousedown() with jQuery's click(), and "return false" with jQuery's preventDefault(). I also set the menu's position using chainable object methods instead of accessing it through a variable like you did it.

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

});​​​

Upvotes: 2

user1102171
user1102171

Reputation: 684

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

});

just found the solution...this code works...Maybe someone can still point out why the earlier one does not work...but this time the only difference is that I am positioning it only once. So repositioning it before every toggle leads to problems...mentioned above...is this normal ?

Upvotes: 0

Related Questions