How to append a set of bullets in a jQuery drop down menu?

StackOverflow https://stackoverflow.com/questions/21481319

Domanda

I have been trying to append a set of items in a dropdown menu (see jQuery script below). Everything is working, however netbeans warns that "XHTML element "li" not allowed as child of xhtml script". Actually, I tried both $().html and $().append. The former works better since it clears the cache. Is there anyway to remove this warning? Is there any real problem behind this warning? I will really appreciate any hint.

<!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>
È stato utile?

Soluzione

EDIT

Ok I noticed I didn't answer your question.

The error that you are getting is because of the XHTML. XHTML has certain rules you have to follow. In the case of the error you are getting you need to change your <script></script> block to be like so:

<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>

Notice the //<![CDATA[ and its closing //]]> this tells the page not parse whatever is inside the CDATA as XML.

This is only important when you have inline <script></script>. This error does not happen when you have it as an external .js file.

Here is a good read on the matter: http://javascript.about.com/library/blxhtml.htm

There is no problem with your html appending. I added the empty() method so that the submenu doesn't keep growing everytime you hover over it.

...
$('#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()

if you want to still use the .html() this is how it would be used:

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

DEMO WITH .HTML()

Altri suggerimenti

Don't append > (as an arrow sign) it'll make your html invalid, use &gt; instead or better use an icon

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

Demo ----> http://jsfiddle.net/jACm7/5/

While appending new html, try to use jquery instead of raw html

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

Demo ----> http://jsfiddle.net/jACm7/6/

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top