1

私はjQueryの初心者で、この小さな問題があります。ホバーするとサブメニューが表示されるこのMenu1があります。私の問題は、サブメニューが下にスライドしてホバーすると、上にスライドすることです。サブメニューにカーソルを合わせたときにスライドアップしないようにコーディングするにはどうすればよいですか?

<div id="menu">
    <a href="#" id="items">Menu 1</a>
</div>

<div id="submenu">
    <a href="#">Sub Menu 1</a>
    <a href="#">Sub Menu 2</a>
    <a href="#">Sub Menu 3</a>
</div>

jQuery:

$(document).ready(function()
    {
        $('#menu').hover(
        function()
        { 
            $('#submenu').slideDown();
        },
        function()
        {
            $('#submenu').slideUp();
        });
    });
4

4 に答える 4

2

HTML マークアップを変更し、HTML サブメニューをメニュー内にネストして、関数で使用することがslideToggleできhoverます

HTML:

<div id="menu"> 
    <a href="#" id="items">Menu 1</a>
    <div id="submenu" style="display: none"> 
        <a href="#">Sub Menu 1</a>
        <a href="#">Sub Menu 2</a>
        <a href="#">Sub Menu 3</a>
    </div>
</div>

JS:

$(document).ready(function () {
    $('#menu').hover(function () {
        $('#submenu').slideToggle();
    });
});

デモ: http://jsfiddle.net/DH5Lw/

于 2013-10-10T07:03:06.933 に答える
0

それが役に立てば幸い 

 $(document).ready(function()
    {
    $('#submenu').hide();
    $('#menu').hover(
    function()
    { 
        $('#submenu').slideDown();
    } );
    $('#submenu').mouseout(function(){
         $('#submenu').slideUp();
    });   
    });
于 2013-10-10T06:55:36.847 に答える
0

HTML -追加のラッパー div を追加

   <div id="holderDiv">
    <div id="menu">
        <a href="#" id="items">Menu 1</a>
    </div>
   <div id="submenu">
        <a href="#">Sub Menu 1</a>
        <a href="#">Sub Menu 2</a>
        <a href="#">Sub Menu 3</a>
    </div>
    </div>

JQuery -

$("#submenu").hide();
   $("#menu").on('mouseover', function () {
         $("#submenu").slideDown(500);
   });

    $("#holderDiv").on('mouseleave', function () {
           $("#submenu").slideUp(500);
    });

デモ

于 2013-10-10T07:03:38.293 に答える