Question

这个sample as reference这是菜单栏悬停时页面顶部的菜单栏，下拉菜单中有下拉菜单，当我点击菜单时，它会在左侧加载相同的菜单在页面中间的内容左侧菜单是一个标记，有其他页面可以看...它与菜单页面中的子菜单相同..我的问题是为什么左边的子菜单不是clickable我在子菜单的按钮上点击了警告，但它不会显示我的代码就像这样

这是index.php

<body >
<div id="header">
    <?php include ('pages/menupages.php'); ?>
</div>  
<div id="body">
    <div id="bodycontainer" >
        <table border="0" cellpadding="0" cellspacing="0">
            <tr style="vertical-align: top;">
                <td>
                    <div class="leftsidecolumn" id="leftcolumncontainer">

                    </div>
                </td>
                <td id="middletd" style="vertical-align: top;">
                    <div class="middlecolumn" id="middlecolumncontainer">
                    </div>
                </td>
            </tr>
        </table>

    <div id="footer">
        <?php include ('pages/footer.php'); ?>
    </div>
</div>
</body>

顶级菜单

<div id="headermenu">
                    <ul >
                        <li id=""><a href="#">home</a></li>
                        <li id=""><a href="#">product</a>
                            <ul class="">
                                <li><a href="#">computer and other devices</a>
                                    <ul>
                                        <li id="desktop"><a href="#">desktop</a></li>
                                        <li id="laptop"><a href="#">laptop</a></li>
                                        <li id="phones"><a href="#">mobile phones</a></li>
                                        <li id="consoles"><a href="#">consoles</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">submenu2</a>
                                    <ul>
                                        <li><a href="#">submenu.1</a></li>
                                        <li><a href="#">submenu.2</a></li>
                                        <li><a href="#">submenu.3</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">submenu3</a>
                                    <ul>
                                        <li><a href="#">submenu.1</a></li>
                                        <li><a href="#">submenu.2</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">submenu4</a></li>
                                <li><a href="#">submenu5</a></li>
                                <li><a href="#">submenu6</a>
                                    <ul>
                                        <li><a href="#">submenu.1</a></li>
                                        <li><a href="#">submenu.2</a></li>
                                        <li><a href="#">submenu.3</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">submenu7</a></li>
                                <li><a href="#">submenu8</a>
                                    <ul>
                                        <li><a href="#">submenu.1</a></li>
                                        <li><a href="#">submenu.2</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>           
                        <li id=""><a href="#">menu3</a>
                            <ul>
                                <li><a href="#">submenu1</a>
                                    <ul>
                                        <li><a href="#">submenu.1</a></li>
                                        <li><a href="#">submenu.2</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">submenu2</a></li>
                            </ul>
                        </li>
                    </ul>   
                </div>

电脑清单

<div id="sidemenucomputer" >
        <div id="" class="leftnavigation headerimage">
        <img src="images/computer.png"/>    
            <ul class="leftnavigationlist">
                                        <li id="leftdesktop"><a href="#">desktop</a></li>
                                        <li id="leftlaptop"><a href="#">laptop</a></li>
                                        <li id="leftphones"><a href="#">mobile phones</a></li>
                                        <li id="leftconsoles"><a href="#">consoles</a></li>
            </ul>
        </div>
</div>

这是js

$('#desktop').click(function() {
                    $('#middlecolumncontainer').load('pages/desktopcontent.php');
                    $('#leftcolumncontainer').load('pages/computerlist.php');
                });



$('#leftdesktop').click(function() {
                    alert("desktop");
                });

当我点击桌面时，它会加载左侧的菜单列表和中间内容的内容。现在左侧列表中没有点击菜单，因为警报没有显示这是不可能的，或者我做错了

Answer 1

更改您的代码：

$(document).on('click','#leftdesktop',function() {
    alert("desktop");
});

由js函数加载的页面无法使用js函数js html加载另一个页面

1 个答案: