Question

我正在根据.slideDown() <div id="menuDiv">指定<li>的{{1}}来制作一个可以<div id="menuDiv"> <ul>显示的菜单。下。此外，当光标离开<div id="menuDiv">时，.slideUp()应该<div id="menuContainer">，除非光标在<div id="menuDiv">上方向下移动。

我有这个标记：

   <div id="menuContainer">
   <!-- this is styled to be your standard CSS <ul> menu (<ul>'s list-style: none; <li> float: right) -->
        <ul>
            <li id="overSlide1"><a href="#1" class="linkClass">Alpha</a></li>
            <li id="overSlide2"><a href="#2" class="linkClass">Beta</a></li>
            <li id="overSlide3"><a href="#3" class="linkClass">Gamma</a></li>
            <li id="overSlide4"><a href="#4" class="linkClass">Theta</a></li>
        </ul>
    </div>
    <div id="menuDiv">
    <!-- This is position right under the <div id="menuContainer"> via CSS -->
    </div>

并为Jquery做了这个：

$(document).ready(function(){
    $("#overSlide1").hover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    }, function(){

    });

    $("#overSlide2").hover(function(){
        $("#menuDiv").slideUp(250, function(){
        });
    }, function(){

    });

    $("#overSlide3").hover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    }, function(){

    });

    $("#menuDiv").hover(function(){

    }, function(){
        $(this).slideUp(75);
    });
});

我遇到的问题是“除非光标在<div id="menuDiv">本身落下”。

Answer 1

试试这个

$(document).ready(function(){
    $("#overSlide1").mouseover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    };

    $("#overSlide1").mouseout(function(){
        $("#menuDiv").slideUp(250, function(){
        });
    };
 $("#overSlide2").mouseover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    };

    $("#overSlide2").mouseout(function(){
        $("#menuDiv").slideUp(250, function(){
        });
    };

 $("#overSlide3").mouseover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    };

    $("#overSlide3").mouseout(function(){
        $("#menuDiv").slideUp(250, function(){
        });
    };

 $("#overSlide4").mouseover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    };

    $("#overSlide4").mouseout(function(){
        $("#menuDiv").slideUp(250, function(){
        });
    };

});

这可能是一个小小的错误，jquery很奇怪有时不能按预期工作。如果这对您不起作用，还有其他方法，这与您已经拥有的方式相比，这是最简单的方法。请告诉我，我会提供更多帮助。

显示/隐藏<div>基于<li> .hover（）</li> </div>

1 个答案: