0

メニュー要素にカーソルを合わせると情報のブロックを表示できる単純なjqueryドロップダウン関数を作成しようとしています。この時点で、マウスオーバーが速すぎると、これまでに作成したものにバグが発生し、グリッチが発生します。また、ドロップダウンは、要素をホバリングしている間のみ表示され、子には表示されないようです。

たぶん、誰かがコードをざっと見て、何らかのフラグを実装する方法を提案して、メニューが簡単に消えず、複数のマウスホバーでグリッチにならないようにすることができます。

純粋な css でそれをしない理由を尋ねるかもしれませんが、残念ながら私は古いブラウザーのサポートが必要で、それを 1 つの関数でラップすることを好みます。

jsbin: http://jsbin.com/inedoy/1

コードは次のとおりです。

<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">

<style>
    body {margin:60px; font-family: sans-serif; font-size:12px;}
    ul {margin:0;padding:0;} 
    ul li {
        position:relative;
        list-style-type: none;
        padding:5px 0;
        border-bottom:1px solid #ddd;
    }
    .dropdown {
        display:none;
        position:absolute;
        width:200px;
        border:1px solid #ddd;
        padding:20px;
        top:40px;
        left:0;
    }
</style>
</head>
<body>

<ul>
    <li class="drop">Some link
        <div class="dropdown">
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
            </ul>

        </div>
    </li>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>

dropdown('.drop','.dropdown');

function dropdown(hoverElement,toShow){ 
    $(hoverElement).hover(function(){                       
        $(toShow).stop().slideDown();                   
    },function(){       
        setTimeout(function(){
            $(toShow).stop().hide();    
        },300);     
    });
}
</script>

</body>
</html>
4

2 に答える 2

2

トリックの 1 つは、マウスがまだ内側にあるときにタイマーをリセットし、マウスが外側にあるときにタイマーを開始することです。

$(function() {
  var myTimer;
  $(document).on("mouseenter", ".drop", function() {
    parent = this;

    // Close the other dropdowns except this one..
    $(".drop").not(parent).find(".dropdown").hide();

    // Show dropdown
    $(".dropdown", parent).show();

    // Clear the timer so it doesnt close.
    clearTimeout(myTimer);

   }).on("mouseleave", ".drop", function() {
    parent = this;

    // Start the timer
    myTimer = setTimeout(function(){
        $(".dropdown").hide();
    },560)
  });
});

デモ: http://jsbin.com/inedoy/42/

于 2012-10-11T13:56:56.027 に答える
1

コードにいくつかの変更を加えました:

<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">

<style>
    body {margin:60px; font-family: sans-serif; font-size:12px;}
    ul {margin:0;padding:0;} 
    ul li {
        position:relative;
        list-style-type: none;
        padding:5px 0;
        border-bottom:1px solid #ddd;
    }
    .dropdown {
        display:none;
        position:absolute;
        width:200px;
        border:1px solid #ddd;
        padding:20px;
        top:25px;
        left:0;
    }

  .drop
  {
    /*border: 1px solid;*/
  }

</style>
</head>
<body>

<ul>
    <li class="drop">Some link
            <ul class="dropdown">
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                <li>Aliquam tincidunt mauris eu risus.</li>
                <li>Vestibulum auctor dapibus neque.</li>
            </ul>
  </li>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>

dropdown('.drop','.dropdown');

function dropdown(hoverElement,toShow)
  { 
    var intervalId = 0, sliding= false;

    $(hoverElement).hover(function()
    {                       
        clearTimeout(intervalId);
        if(!sliding)
        {
          sliding = true;
          $(toShow).stop().slideDown( function(){sliding = false;});                        
        }

    },function(){       
        intervalId = setTimeout(function()
        {
            sliding = false;
            $(toShow).stop().hide();    
        },300);     
    });
}
</script>

</body>
</html>

http://jsbin.com/inedoy/36/edit

于 2012-10-11T14:00:55.983 に答える