Question

我已经尝试了CSSmenu网站的垂直菜单示例，示例源代码正常工作，菜单正在按照示例进行扩展，当我尝试动态添加菜单时，即使我已经验证，这些菜单也没有扩展最终的对象结构。

动态菜单代码：

<body>
    <script>
        /**
         * Comment
         */
        function add() {
            var list = document.getElementById('list');
            var elem=document.createElement('li');
            elem.setAttribute('class','last has-sub');
            elem.innerHTML="<a href='#'><span>My_Products</span></a>"
                +"<ul style='display: none;' >"
                    +"<li><a href='#'><span>Product 1</span></a></li>"
                    +"<li><a href='#'><span>Product 2</span></a></li>"
                    +"<li class='last'><a href='#'><span>Product 3</span></a></li>"
               + "</ul>";
       list.appendChild(elem);
        }
    </script>
    <div id='cssmenu'>
        <ul id='list'>
            <li class='active'><a href='#'><span>Home</span></a></li>
            <li class='has-sub'><a href='#'><span>Products</span></a>
                <ul>
                    <li><a href='#'><span>Product 1</span></a></li>
                    <li><a href='#'><span>Product 2</span></a></li>
                    <li class='last'><a href='#'><span>Product 3</span></a></li>
                </ul>
            </li>

            <li><a href='#'><span>Contact</span></a></li>
            <li class='last has-sub'><a href='#'><span>About</span></a>
                <ul>
                    <li><a href='#'><span>Company</span></a></li>
                    <li class='last'><a href='#'><span>Contact</span></a></li>
                </ul>
            </li>
        </ul>
    </div>

    <input type="button" value="Add Menu" onclick="add()">
</body>

Answer 1

script.js 在这个＆＃34;库＆＃34;有行：

$('#cssmenu > ul > li > a').click(function() {

因此，不会使用此click处理程序处理动态创建的元素。您可以修改脚本行，将此处理程序转换为delegated event handler：

$('#cssmenu').on('click', '#list > li > a', function() {

垂直菜单扩展不适用于动态内容

1 个答案: