Jquery - Mouseenter和Mouseleave

Question

到目前为止，我有以下几点：

$("#main-link-bottom-about").mouseenter(function() {
    $("#main-about-hover").slideDown("slow");
});

$("#main-about-hover, #main-link-bottom-about").mouseleave(function() {
    $("#main-about-hover").slideUp("slow");
});

当你将鼠标悬停在链接上时，这基本上是一个下拉菜单。我想要实现的是，当您将鼠标悬停在#main-link-bottom-about上时，当鼠标离开#main-about-hover或#main-link-bottom-about时，#main-about-hover会重新滑回。

然而，问题是，如果鼠标离开#main-about-hover到#main-link-bottom-about上，#main-about-hover就会滑到我不希望发生这种情况的地方。

是否有可能添加此异常，或者我是否走错了方向？

编辑：：

HTML：

<!-- Navigation Links Bottom -->

<div id="main-links-bottom" class="shadow">

    <a href="index.php" id="main-link-bottom-about" class="main-infotext-bottom">About</a>

    <a href="#" class="main-infotext-bottom">Information</a>

    <a href="#" class="main-infotext-bottom">Services</a>

    <a href="#" class="main-infotext-bottom">Support</a>

    <a href="#" class="main-infotext-bottom">Careers</a>

    <a href="#" class="main-infotext-bottom">Mobile Site</a>

    <a href="#" class="main-infotext-bottom">Site Map</a>

    <a href="#" class="main-infotext-bottom" onclick="alert('Coming Soon!')">Mobile App</a>

    <div id="main-links-bottom-hover">

        <div id="main-about-hover">

            <div id="main-about-div">

                <li id="lnk1" class="about-lnk"><a href="#">Contact</a></li>
                <li id="lnk2" class="about-lnk"><a href="#">Technology</a></li>
                <li id="lnk3" class="about-lnk"><a href="#">Coverage</a></li>
                <li id="lnk4" class="about-lnk"><a href="#">Environment</a></li>
                <li id="lnk5" class="about-lnk"><a href="#">T&amp;C's</a></li>
                <li id="lnk6" class="about-lnk"><a href="#">Refund Policy</a></li>

            </div>

        </div>

    </div>

</div>

Answer 1

这是一个很好的起点。使导航比示例更美观(将其放在每个类别下)，但这是可行的。

jsfiddle：http://jsfiddle.net/xtBXj/2/

HTML：

<!-- Navigation Links Bottom -->
<input id="test"></input>
<div id="main-links-bottom" class="shadow">

    <a href="index.php" id="main-link-bottom-about" class="main-infotext-bottom">About</a>

    <a href="#" class="main-infotext-bottom">Information</a>

    <a href="#" class="main-infotext-bottom">Services</a>

    <a href="#" class="main-infotext-bottom">Support</a>

    <a href="#" class="main-infotext-bottom">Careers</a>

    <a href="#" class="main-infotext-bottom">Mobile Site</a>

    <a href="#" class="main-infotext-bottom">Site Map</a>

    <a href="#" class="main-infotext-bottom" onclick="alert('Coming Soon!')">Mobile App</a>

    <div id="main-links-bottom-hover">

        <div id="main-about-hover">

            <div class="hovers" id="About">

                <li id="lnk1" class="about-lnk"><a href="#">Contact</a></li>
                <li id="lnk2" class="about-lnk"><a href="#">Technology</a></li>
                <li id="lnk3" class="about-lnk"><a href="#">Coverage</a></li>
                <li id="lnk4" class="about-lnk"><a href="#">Environment</a></li>
                <li id="lnk5" class="about-lnk"><a href="#">T&amp;C's</a></li>
                <li id="lnk6" class="about-lnk"><a href="#">Refund Policy</a></li>

            </div>

          <div class="hovers" id="Information">

                <li id="lnk1" class="about-lnk"><a href="#">InfoContact</a></li>
                <li id="lnk2" class="about-lnk"><a href="#">InfoTechnology</a></li>
                <li id="lnk3" class="about-lnk"><a href="#">Coverage</a></li>
                <li id="lnk4" class="about-lnk"><a href="#">Environment</a></li>
                <li id="lnk5" class="about-lnk"><a href="#">T&amp;C's</a></li>
                <li id="lnk6" class="about-lnk"><a href="#">Refund Policy</a></li>

            </div>

                    <div class="hovers" id="Services">

                <li id="lnk1" class="about-lnk"><a href="#">ServInfoContact</a></li>
                <li id="lnk2" class="about-lnk"><a href="#">ServInfoTechnology</a></li>
                <li id="lnk3" class="about-lnk"><a href="#">Coverage</a></li>
                <li id="lnk4" class="about-lnk"><a href="#">Environment</a></li>
                <li id="lnk5" class="about-lnk"><a href="#">T&amp;C's</a></li>
                <li id="lnk6" class="about-lnk"><a href="#">Refund Policy</a></li>

            </div>

        </div>

    </div>

</div>

JS：

$(".hovers").hide();

//$("#main-links-bottom-hover").hide();

$(".main-infotext-bottom").mouseenter(function() {
    $(".hovers").slideUp();
    var m = $(this).html();
    $("#test").val(m);
    $("#" + m).slideDown();
});


$("#main-links-bottom").mouseleave(function() {
    $(".hovers").slideUp();
});

Answer 2

试试这段代码

$("#main-link-bottom-about, #main-links-bottom-hover").mouseenter(function () {
  $("#main-about-hover").stop().slideDown("slow");
});

$("#main-about-hover, #main-link-bottom-about").mouseleave(function () {
  $("#main-about-hover").stop().slideUp("slow");
});

检查JSFiddle demo here

Answer 3

最好将链接和悬停菜单嵌套在同一元素中。这将允许您将鼠标事件绑定到单个元素。此外，考虑使用类而不是DOM ID，这样您就可以根据需要轻松地将悬停菜单添加到其他链接。

例如：

HTML

<div id="main-links-bottom">
    <div class="main-link-container">
        <a href="index.php" class="main-infotext-bottom">About</a>
        <div class="hover-menu">
             <a href="#">Contact</a>
             <a href="#">Technology</a>
             <a href="#">Coverage</a>
             <a href="#">Environment</a>
             <a href="#">T&amp;C's</a>
             <a href="#">Refund Policy</a>
        </div>
    </div>
    <div class="main-link-container">
         <a href="#" class="main-infotext-bottom">Information</a>
    </div>
    ...
</div>

JS现在可以相当简单，使用slideToggle()甚至可以更简单

Javascript

 $('#main-links-bottom .main-link-container').bind('mouseenter mouseleave',
      function() {
          $(this).find('.hover-menu').slideToggle('slow');
      }
 );