1

カーソルを合わせると下にスライドするドロップダウンを作成しています。これは私が持っていたコードです。この目標を達成するためにHoverIntentを使用したいと思います。

.menu_imgは、リストのスライドダウンを開始するためにカーソルを合わせた画像上のクラスです。

.page_navは、.menu_imgにカーソルを合わせると下にスライドするリストのクラスです。

$(document).ready(function(){
  $('img.menu_img').click(function () {
   $('ul.page_nav').stop().slideDown('slow');
  });
});

HTML

<div id="helper_bar">
    <div class="page_width">
        <img src="images/page_nav.png" alt="page_nav" title="use this to navigate the page" class="menu_img" width="179" height="33" />
    </div>
</div>

<div class="page_width">
    <ul class="page_nav">
            <li><a href="#">About</a></li>
            <li><a href="#">Services Offered</a></li>
            <li><a href="#">The Team</a></li>
            <li><a href="#">The Process</a></li>
    </ul>
</div>

これは私が持っているコードです。これは、imgをクリックすると機能しますが、.clickを.hoverに切り替えると、liに移動しようとしたときにホバーアウトします。これが、hoverIntentプラグインを導入した理由ですが、作成しようとしている適切なソリューションを取得するためにそれを統合する方法がわかりません。

ところで、私はHTMLコードを含めませんでしたが、その単純な画像と私が知っているulliタグは正常に機能しています。表示があります：なし。ul liで、レイアウトで適切に機能するようにいくつかの作業を行いました。（通常のドロップダウンとはレイアウトが少し異なります。）いずれにせよ、CSSが正しいと確信しているので、Jqueryの記述方法を理解する必要があります。ありがとう！

4

1 に答える 1

2

【回答更新】

あなたがやりたいことは、ホバー効果で少し挑戦的になるでしょう。考えられる解決策は次のとおりですがhoverIntent、イベントがバブルする必要があり、イベントがバブルしないため、mouseenter使用できませmouseleaveん。ただし、このソリューションにはhoverIntentのような効果を組み込んでいます。menuまず、両方のアイテムをIDが：の単一のdivにラップします。

<div id="menu">
    <div id="helper_bar"> ... </div>
    <div class="page_width"> ... </div>
</div>

そして、このJSを（document.readyイベント内で）使用します。

var trigger = $("img.menu_img")[0], // The DOM element
    $nav    = $("ul.page_nav");     // The jQuery Wrapped DOM element
$("#menu").mouseover(function(e){
   // Keep track when the mouse is over the menu area
   if(e.target == this){
     $(this).data('over', true);
   }      

   // Only show menu if the img.menu_img was what triggered the event
   if(e.target == trigger){
     $nav.stop().slideDown('slow');
   }
}).mouseout(function(e){
   if( e.target == this ){
       var $this = $(this);
       $this.data('over', false);
       window.setTimeout(function(){
          if(!$this.data('over')) $nav.stop().slideUp('slow');
       }, 500); // Wait half a second to see if the mouse reenters the element
   }
});

この解決策について質問や問題がある場合は、質問してください。

【元の回答】

hoverulリストがの子になることは決してないので、あなたが望むもののために働くことは決してありませんimg。メニューから移動するたびにimg、メニューが非表示になります。私がお勧めするのは、次のようなものです（実際には、画像の代わりに画像の置換を使用することをお勧めしますが、一度に1つのことだけを実行できます）：

HTML

<ul id="nav">
  <li><img class="menu_img" alt="Home" />
      <ul class="page_nav">
         ...
      </ul>
  </li>
  ....
</ul>

JS

$("#nav > li").hoverIntent( function(){
    $('ul.page_nav', this).stop().slideDown('slow');
}, function(){
    $('ul.page_nav', this).slideUp('slow');
});

このように、mouseenterイベント（またはhoverIntentを使用した遅延バージョン）は、がホバーされたときに発生し、liリスト全体がマウスで終了するまで再度発生しません。liしたがって、マウスがその子またはその子の上にある限り、mouseoutイベントは発生せずpage_nav、メニューとしての役割を果たします。

于 2010-02-14T04:26:23.483 に答える