0

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を上にスライドさせる必要があります。これはどのように行うことができますか？

4

6 に答える 6

0

これを試して、次のdoc readyように配置します：http: //jsfiddle.net/ptVbs/

$("#mousehover").hover(function() {
    $("#hovercontent").slideDown("slow");
}, function() {
    if (!$("#hovercontent").hover()) {
        $("#hovercontent").slideUp("slow");
    }
});
$("#hovercontent").mouseleave(function() {
    $(this).slideUp("slow");
});

あなたはフィドルでそれを試すことができます。

于 2012-12-28T06:01:05.337 に答える
0

クラスの使用をお勧めします。

HTML：

<ul class="nav nav-tabs nav-stacked">
    <li  id = "mousehover" class="menu1">
       <a style="background-color:#f78144;color:#000;text-align:center;" href="#">Time Table</a>
    </li>
</ul>
<div id = "hovercontent" class="menu1">
    Contents 1 
</div>

JS：

<script>
$(document).ready(function(){
    $("#mousehover").mouseenter(function(){
        $("#hovercontent").slideDown("slow");
    });

    $(".menu1").mouseout(function(){
        $("#hovercontent").slideUp("slow");
    });
});​
</script>
于 2012-12-28T06:03:05.833 に答える
0

使用する方が良いし、あなたのためにそれをmouseover行いmouseoutます..

$("#hovercontent").bind("mouseout", function() {
     $(this).slideUp("slow");
});
于 2012-12-28T05:57:00.787 に答える
0

http://www.quirksmode.org/js/events_mouse.htmlをチェックしてください。イベントハンドラで、そこで説明されている relatedTarget を確認します。イベントハンドラで console.log を使用して、何が起こっているかを追跡します。残念ながら、あなたが使用しているクラスの CSS がなければ、これ以上のことはできません... http://jsbin.com/で JSBin のテストケースを提供していただけないでしょうか?

于 2012-12-28T06:04:19.610 に答える
0

試してみてevent.typeくださいコンテンツに'hover' 「ホバー」イベント ハンドラーをアタッチすると、どのイベント タイプが発生しているかがわかります。イベントを使用すると、 mouseenterとmouseleaveが得られます#mousehoverevent.type'hover'

$(document).ready(function(){
    ​$('#mousehover').on('hover',function(event){
        switch(event.type){
            case 'mouseenter': $("#hovercontent").slideDown("slow");
                break;
            case 'mouseleave': $("#hovercontent").slideUp("slow");
                break;
        }
    });​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
});
于 2012-12-28T06:05:40.797 に答える
0

これを試して

$(document).ready(function(){
   $("#mousehover").mouseover(function(){
      $("#hovercontent").slideDown("slow");
   });
   $("#hovercontent ,#mousehover").mouseleave(function(){
       $('#hovercontent').slideUp("slow");
   });

});
于 2012-12-28T06:05:59.477 に答える