0

関数を使用しjQuery toggleてサブメニューを開閉するメニューがあります。これは私のすべてのページで完全に正常に機能していますが、同じメニューとサブメニューをに追加しようとすると、サブメニューjQuery dialog boxが開きません。

ページのインクルードを含む私のindex.phpコードは次のとおりです。javascript<head>

<script src="javascripts/jq/jquery-1.4.2.min.js"></script>
<script src="javascripts/jq/jquery-v1.8.3.js"></script>
<script src="javascripts/jq/jquery-v1.9.2.js"></script>

<p align="center" id="temp_menuOpener">[Click Here to Toggle Menu]</p>

<div id="temp_menu">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
        <td class="ui-corner-bl ui-corner-br cus-dialog-content"><?php include("includes/menu.php");?></td>
        </tr>
    </table>
</div>

<script>
    $( "#temp_menu" ).dialog({ autoOpen: false, width: 'inherit'});
    $( "#temp_menuOpener" ).click(function() {
    $( "#temp_menu" ).dialog( "open" );
    });
</script>

これが私のmenu.phpコードです：

<script>
$(function()
    {
    $('.schedOpener').click(function()
        {
        $('div#submenu_sched').toggle();
        });
    });
</script>

<div id="menu">
    <div class="menu schedOpener">
    <img src="/roster/images/menu/schedule.png" border="0" title="Schedule" alt="Schedule">
    </div>

    <div id="submenu_sched">
        <div class="menu">
        <a href="/roster/sched/sched_month.php" target="_parent"><img src="/roster/images/menu/sched_month.png" border="0" title="Schedule Month View" alt="Schedule Month View"></a>
        </div>
    </div>

</div>

の CSSsubmenu_schedは に設定されていdisplay:none;ます。

だから、私が言ったように、このメニューは a に追加されるまで完全に機能しdialog box、その後失敗します。id="temp_menu"から削除するだけ<div>で機能しますが、 からも削除されますdialog box。

これをjsfiddleに追加しようとしましたが、ライブラリフレームワークdialog boxを選択しても、まったく機能しませんでした。jQuery 1.8.3代わりに、テストサーバーにセットアップして、少なくとも私が何を意味するかを理解できるようにします. 私のテスト サーバーには、ここに投稿したもの以外にもメニューやページ自体があることに気付くでしょう。静音対ノイズ比を適切なレベルに維持しようとしています:)

イワクタイト

4

1 に答える 1

2

さて、しばらくjsFiddleで遊んだ後、私はすべての問題を理解しました。まず、JavaScript をダイアログ内に配置しないでください。次に、($("#temp_menu").dialog("isOpen") == true) ? $("#temp_menu").dialog("close") : $("#temp_menu").dialog("open");ダイアログを開くか閉じるかを比較するために使用する必要があります。

これが私の作業中のjsFiddle で、フルスクリーン バージョンのjsFiddleです。

于 2013-01-30T15:34:37.640 に答える