Question

我一直在尝试在下拉菜单中附加一组项目（请参阅下面的jQuery脚本）。一切正常，但netbeans警告“XHTML元素”li“不允许作为xhtml脚本的孩子”。实际上，我尝试了$（）。html和$（）。追加。前者工作得更好，因为它清除了缓存。反正有没有删除此警告？这个警告背后有什么问题吗？我真的很感激任何提示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>JQuery Examples</title>
        <script src="http://code.jquery.com/jquery-1.3.2.js" type="text/javascript"></script>  


        <style type="text/css" media="screen">
            a{ text-decoration: none; color: rgb(255,255,255);}
            ul{ margin: -5px; list-style: none; font-size: 12px;}
            ul.dropdown{position: relative;}
            ul.dropdown li {  float: left;  background: #000066; zoom: 1; }
            ul.dropdown a:hover {background: #0f0; color: #00f; }
            ul.dropdown li a { display: block; padding: 4px 8px; border-right: 1px solid #000; }
            ul.dropdown ul { width: 200px; visibility: hidden; position: absolute;  }
            ul.dropdown ul li {background: #000066; border-bottom: 1px solid #000; float: none;}
            ul.dropdown ul li a { border-right: none; width: 100%; } 
            ul.dropdown ul ul { left: 100%; top: 0; }
            .hover {position: relative; }     
        </style>        

        <script type="text/javascript">
            $(document).ready(function() {
                $("ul.dropdown li").hover(function() {
                    $(this).addClass("hover");
                    $('ul:first', this).css('visibility', 'visible');
                    $("#inbox").html("<li><a href=\"http://example.com\">Message1</a></li>");
 //                   $("#inbox").append("<li><a href=\"http://example.com\">Message2</a></li>");                    

                }, function() {
                    $(this).removeClass("hover");
                    $('ul:first', this).css('visibility', 'hidden');
                });
                $("ul.dropdown li ul li:has(ul)").find("a:first").append("  >");
            });
        </script>



    </head>
    <body>
        <ul class="dropdown">
            <li><a href="http://example.com">Messages</a>
                <ul>
                    <li ><a href="http://example.com">Inbox</a>


                        <ul id="inbox">

                                                    <!-- The append should enter here! -->

                        </ul>


                    </li>
                    <li><a href="http://example.com">Sent box</a>
                        <ul>
                            <li><a href="http://example.com">.Net</a></li>
                            <li><a href="http://example.com">JSP</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="http://example.com">Movies</a>
                <ul>
                    <li><a href="http://example.com">Movie 1</a></li>
                    <li><a href="http://example.com">Movie 2</a></li>
                    <li><a href="http://example.com">Movie 3</a>
                        <ul>
                            <li><a href="http://example.com">Actor 1</a></li>
                            <li><a href="http://example.com">Actor 2</a></li>
                            <li><a href="http://example.com">Actor 3</a></li>
                        </ul>
                    </li>
                    <li><a href="http://example.com">Action Movies</a>
                        <ul>
                            <li><a href="http://example.com">Movie 4</a></li>
                            <li><a href="http://example.com">Movie 5</a></li>
                        </ul>
                    </li>
                    <li><a href="http://example.com">Comedy Movies</a></li>
                </ul>
            </li>
            <li><a href="http://example.com">Books</a>
                <ul>
                    <li><a href="http://example.com">Field 1</a></li>
                    <li><a href="http://example.com">Field 2</a>
                        <ul>
                            <li><a href="http://example.com">Love 1</a></li>
                            <li><a href="http://example.com">Love 2</a></li>
                        </ul>
                    </li>
                    <li><a href="http://example.com">Field 3</a></li>
                    <li><a href="http://example.com">Field 4</a></li>
                    <li><a href="http://example.com">Field 5</a></li>
                </ul>
            </li>            
        </ul>
    </body>

Answer 1

修改

好的我发现我没有回答你的问题。

您获得的错误是由于XHTML。 XHTML有一些必须遵循的规则。如果出现错误，您需要将<script></script>块更改为：

<script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $("ul.dropdown li").hover(function() { $(this).addClass("hover"); $('ul:first', this).css('visibility', 'visible'); $("#inbox").html("<li><a href=\"http://example.com\">Message1</a></li>"); //$("#inbox").append("<li><a href=\"http://example.com\">Message2</a></li>"); }, function() { $(this).removeClass("hover"); $('ul:first', this).css('visibility', 'hidden'); }); $("ul.dropdown li ul li:has(ul)").find("a:first").append(" >"); }); //]]> </script>

注意//<![CDATA[及其结束//]]>这告诉页面不解析CDATA中的任何内容为XML。

只有在您拥有内联<script></script>时才会这样做。将它作为外部.js文件时，不会发生此错误。

以下是关于此事的好读物：http://javascript.about.com/library/blxhtml.htm

你的html附加没有问题。我添加了empty()方法，以便每次将鼠标悬停在子菜单上时子菜单都不会继续增长。

... $('#inbox').empty() .append("<li><a href=\"http://example.com\">Message1</a></li>") .append("<li><a href=\"http://example.com\">Message2</a></li>"); ...

<强> DEMO WITH .APPEND()

如果你仍想使用.html()这就是它的使用方式：

... $('#inbox').html("<li><a href=\"http://example.com\">Message1</a></li>" + "<li><a href=\"http://example.com\">Message2</a></li>"); ...

<强> DEMO WITH .HTML()

Answer 2

不要追加>（作为箭头符号）它会使您的HTML无效，请改用>或更好地使用图标

$("ul.dropdown li ul li:has(ul)").find("a:first").append("  &gt;");

演示----> http://jsfiddle.net/jACm7/5/

在添加新的html时，尝试使用jquery而不是raw html

$("#inbox").html($("<li>").html($("<a>").prop('href', 'http://example.com').text('Message1')));

演示----> http://jsfiddle.net/jACm7/6/

如何在jQuery下拉菜单中附加一组项目符号？

2 个答案: