jquery - Jquery - マウスエンターとマウスリーブ

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-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>

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 のデモを確認してください

Answer 3

リンクとホバー メニューを同じ要素内にネストすることをお勧めします。これにより、マウス イベントを 1 つの要素にバインドできます。また、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');
      }
 );