jqueryでのスライドに小さな問題があります。ホバー(マウスオーバー)すると、ナビゲーションリスト項目が下にスライドしてコンテンツを表示し、マウスアウトすると上にスライドする必要があります。
HTML:
<ul class="nav nav-tabs nav-stacked">
<li id = "mousehover">
<a style="background-color:#f78144; color: #000; text-align: center;" href="#">Time Table
</a>
</li>
</ul>
<div id = "hovercontent">
Contents 1
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#mousehover").mouseenter(function(){
$("#hovercontent").slideDown("slow");
});
$("#hovercontent").mouseleave(function(){
$(this).slideUp("slow");
});
});
</script>
ここでの問題は、リストにカーソルを合わせると div が下にスライドすることですが、div にカーソルを合わせてナビから出た後でのみ、div が上にスライドします。divに入らずにリストからマウスアウトしても、divを上にスライドさせる必要があります。これはどのように行うことができますか?