JSF 2 Facelets jQuery

Ola pessoal, não sei porque, mas não estou conseguindo fazer funcionar o jquery no facelets do jsf 2.0.
<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>

        <style type="text/css">
            ul#nav-menu { margin:0; padding:0; list-style:none; }
            ul#nav-menu > li { margin-top:1px; background:#AFAFAF; font-weight: bold; width: 200px; list-style:none; }
            ul#nav-menu > li > a { display:block; padding: 4px; color: #EFEFEF; text-decoration:none; outline:none; }
            ul#nav-menu > li > a:hover { background: #8F8F8F; }
            ul#nav-menu > li > ul { margin: 0; padding:0; list-style:none; display:none; background:#9F9F9F; }
            ul#nav-menu > li > ul > li{ height: 30px; list-style:none; padding: 0;}
            ul#nav-menu > li > ul > li:hover{ height: 30px; background: #8F8F8F;}
            ul#nav-menu > li > ul > li a { display:block; padding: 2px 0 0 4px; color:#EFEFEF; text-decoration:none; outline:none; }
            ul#nav-menu > li > ul > li a:hover { color:#FFF; background: #8F8F8F; }
        </style>

        <script  src="./resources/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                alert("hi")
               $('ul#nav-menu > li > a').click(function() {
                    $(this).next().slideToggle();
                });
            });
        </script>

        <title>Title</title>
    </h:head>

    <h:body>




        <div id="top">
            <ui:insert name="top">
                <!--  -->

            </ui:insert>
        </div>

        <div>
            <div id="left">
                <ui:insert name="left">
                    <!-- Menu Categorias -->

                    <ul id="nav-menu">
                        <li>
                            <a href="javascript:void(0);">Etapa 1</a>
                            <ul>
                                <li><a href="#">Etapa 1.1</a></li>
                                <li><a href="#">Etapa 1.2</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0);">Etapa 2</a>
                            <ul>
                                <li><a href="#">Categoria 2.1</a></li>
                                <li><a href="#">Categoria 2.2</a></li>
                            </ul>
                        </li>                        
                    </ul>
                </ui:insert>
            </div>
            <div id="content" class="left_content">
                <ui:insert name="content">


                </ui:insert>
            </div>

        </div>

        <!--
        <div id="bottom">
            <ui:insert name="bottom">


            </ui:insert>
        </div>
        -->
    </h:body>

</html>
Se eu coloco o mesmo código em uma página jsp normal, ele funciona. Agora dentro de um modelo facelets, não.
O que estou fazendo de errado?
1 Resposta

Topicos relacionados
