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が動作しません。プルダウンメニューの3本線をクリックすると、色が白からグレーに変わりますが、
メニューが開かず何も起きません。
ちなみに、以下のjQeryは同じXpages上で動作しました。
jQuery(function($){
$("body").css("background-color","#00AEEF");
});
原因がわかる方いらっしゃったら教えてください。
よろしくお願いいたします。