XpagesでjQueryを使用して、プルダウンメニューを作ろうとしていますが、

動作してくれません。

 

以下、HTMLです。

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<div id="sp-icon" class="sp-close"><span></span>
<ul id="">
  <li><a href="ここにページ1のURL">ページ1</a></li>
  <li><a href="ここにページ2のURL">ページ2</a></li>
  <li><a href="ここにページ3のURL">ページ3</a></li>
  <li><a href="ここにページ4のURL">ページ4</a></li>
  <li><a href="ここにページ5のURL">ページ5</a></li>
  <li><a href="ここにページ6のURL">ページ6</a></li>
</ul>
</div>
</xp:view>

 

以下、使用しているCSSです。

@charset "utf-8";

/* -- ul#menu -------------------------------------------------------------------------------- */

ul#menu {
    list-style-type: none;
    width: 100%;
    background: #ffffff;
    opacity: 0.9;
    position: absolute;
    left: 0px;
    top: 70px;
    z-index: 990;
    display: none;
}

ul#menu li {
    text-align: center;
}

ul#menu li a {
    text-decoration: none;
    display: block;
    padding: 15px 0;
}

ul#menu li a:hover {
    background: #a9a9a9;
    opacity: 0.7;
}

/* -- div#sp-icon -------------------------------------------------------------------------------- */

div#sp-icon {
    width: 60px;
    height: 50px;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 999;
}

div#sp-icon:hover {
    cursor: pointer;
    opacity: 0.7;
}

div#sp-icon span,
div#sp-icon span:before,
div#sp-icon span:after {
    display: inline-block;
    width: 30px;
    height: 3px;
    background: #FFFFFF;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.3s;
}

div#sp-icon span {
    left: 50%;
    top: 50%;
    transform: translate( -50%, -50% );
}

div#sp-icon span:before {
    content: "";
    transform: translateY( -10px ) rotate( 0deg );
}

div#sp-icon span:after {
    content: "";
    transform: translateY( 10px ) rotate( 0deg );
}

div.sp-open span {
    background: transparent !important;
}

div.sp-open span:before {
    transform: rotate( 45deg ) !important;
}

div.sp-open span:after {
    transform: rotate( -45deg ) !important;
}

以下、jQueryです。

(function($) {
    
    // function sp_open_close
    function sp_open_close() {
        
        if ( $( this ).hasClass( 'sp-close' ) ) {
            
            $( this )
                .removeClass( 'sp-close' )
                .addClass( 'sp-open' );
            
            $( '#menu' ).slideDown( 'fast' );
            
        } else {
            
            $( this )
                .removeClass( 'sp-open' )
                .addClass( 'sp-close' );
            
            $( '#menu' ).slideUp( 'fast' );
            
        }
        
    }
    
    
    
    
    $( '#sp-icon' ).on( 'click', sp_open_close );

})( jQuery );

 

上記のjQueryが動作しません。プルダウンメニューの３本線をクリックすると、色が白からグレーに変わりますが、

メニューが開かず何も起きません。

 

ちなみに、以下のjQeryは同じXpages上で動作しました。

jQuery(function($){
    $("body").css("background-color","#00AEEF");
});

 

 

原因がわかる方いらっしゃったら教えてください。

よろしくお願いいたします。