0

#about にカーソルを合わせたときにサブメニューを下にスライドさせ、別のオプションにカーソルを合わせるまでサブメニューを表示したままにしようとしています。

また、a#about または nav#about にカーソルを合わせていない場合は、サブ メニューを非表示にしたいと考えています。助けてください。

$(document).ready(function () {
    $('a#about').hover(function(){
        $('nav#about').slideDown();
    });

    $('nav#about').hover(function(){
        $('nav#about').slideDown();
    });

    $('a#home').hover(function(){
        $('nav#about').slideUp();
    });

    $('a#products').hover(function(){
        $('nav#about').slideUp();
    });

    $('a#contact').hover(function(){
        $('nav#about').slideUp();
    });
});

======================================== HTMLを含めるように編集

<nav id="main" class="left">
    <a id="home" class="left active">Home</a>
    <a id="about" class="left" href="#">About</a>
    <a id="products" class="left" href="#">Products</a>
    <a id="contact" class="left" href="#">Contact</a>
</nav>

<nav id="about" class="left">
    <a href="#"></a><br />
    <a href="#"></a><br />
    <a href="#"></a><br />
    <a href="#"></a><br />
    <a href="#"></a><br />
</nav>
4

1 に答える 1

0

#about にカーソルを合わせたときにサブメニューを下にスライドさせ、別のオプションにカーソルを合わせるまでサブメニューを表示したままにしようとしています

divsすべてのナビゲーションに class 属性があり、ナビゲーション リンクが次のようにorタグnavでラップされていると仮定します。divnav

<div id="navigation">
    <a id="about" ...>About</a>
    <a id="home" ...>Home</a>
    <a id="products" ...>Products</a>
    <a id="contact" ...>Contact</a>
    <div class="nav" id="div-about" ...>...</div>
</div>

次のようなことができます：

var menuTimeout;
$('#navigation a, #navigation .nav').hover(function() {
    hovered_div = $('#navigation #' + 'div-' + $(this).attr('id').replace('div-',''));
    $('#navigation .nav').not(hovered_div).hide();
    (hovered_div.css('display') == 'none') && hovered_div.slideDown();
    clearTimeout(menuTimeout);
}, function() {
       menuTimeout = setTimeout(function() { $('#navigation .nav').slideUp(); }, 1000);
   });
});

基本的にクラスhoverのイベントanchorsと要素にバインドし、現在の div (ホバーされたもの) を除くすべての div を非表示にし、表示されていない場合はホバーされた div を slidesDown します。を使用して 1 秒。navnavsetTimeout()

デモを参照してください。

于 2011-11-24T10:23:34.707 に答える