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するとメニューが表示され、次にクリックするとメニューが消えます。

問題：1回目と2回目をクリックすると機能します。しかし、3回目はメニューが表示されなくなります。なぜこれなのか誰か教えてもらえますか？

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（）と交換し、「returnfalse」を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 に答える