1

到目前为止，我有以下内容：

$("#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-about-hover，#main-link-bottom-about.

但是，问题是，如果鼠标离开,会#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>
4

3 回答 3

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();
});
于 2013-01-06T18:08:30.903 回答
0

试试这个代码

$("#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 演示

于 2013-01-06T18:28:09.777 回答
0

您最好将链接和悬停菜单嵌套在同一个元素中。这将允许您将鼠标事件绑定到单个元素。此外，考虑使用类而不是 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');
      }
 );
于 2013-01-06T18:39:58.543 回答