Question

我有一个使用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>

submenu_sched的CSS设置为display:none;。

所以，就像我说的那样，这个菜单完美无缺，直到它被添加到dialog box然后失败。只需从id="temp_menu"中移除<div>即可使其正常工作，但同时也会将其从dialog box中移除。

我尝试将其添加到jsfiddle中，但即使我选择了dialog box库框架，我也无法使jQuery 1.8.3完全正常工作。所以我把它设置在我的测试服务器上，以便你至少可以看到我的意思。你会注意到我的测试服务器上的菜单和页面本身比我在这里发布的更多。我试图将静态噪声比保持在一个良好的水平：）

IWACTITE

Answer 1

好吧，经过一段时间在jsFiddle上玩，我发现了所有的问题。首先，JavaScript不应该在对话框中。其次，您必须使用($("#temp_menu").dialog("isOpen") == true) ? $("#temp_menu").dialog("close") : $("#temp_menu").dialog("open");来比较是打开还是关闭对话框。

这是我的工作jsFiddle 这是全屏版jsFiddle。

无法获取jQuery切换脚本以在jQuery对话框中运行

1 个答案: