0

jQuery ドロップダウンを作成することはできましたが、子リンクの 1 つがロールオーバーされたときに展開したままにすることはできません。

コード：

<li>
    <a  onmouseover="$('.dropdown-1').slideDown('medium');" href="/hosting">Why Veoloo</a>
      <ul class="dropdown-1">
        <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">The Reasons (15)</a></li> 
        <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">Customer Testimonials</a></li>
        <li onmouseout="$('.dropdown-1').slideUp('medium');"><a href="#">Our Support Scope</a></li>
      </ul>
    </li>
4

2 に答える 2

3

html:

<li id="menu">
  <a href="/hosting">Why Veoloo</a>
  <ul class="dropdown-1">
    <li><a href="#">The Reasons (15)</a></li> 
    <li><a href="#">Customer Testimonials</a></li>
    <li><a href="#">Our Support Scope</a></li>
  </ul>
</li>

JavaScript :

$(function(){
  $('.dropdown-1').hide();
  $('#menu').hover(function(){
        $('.dropdown-1').slideDown('medium');
  }, function(){
        $('.dropdown-1').slideUp('medium');
  });
})

例：

http://jsfiddle.net/gurPn/1/

[編集]: ホバー メソッド (jQuery) を使用し、親コンテナーのホブ オフをトリガーするように更新されました (これにより、マウスリーブ イベントがコンテナーでのみキャプチャされ、目的のドロップ ダウン効果が得られます)。

于 2010-12-31T21:51:32.777 に答える
0

マウスオーバーとマウスアウトを使用していると思いますか？（コードを投稿していません）。それらの問題は、マウスオーバーイベントを発生させる要素がある場合、マウスアウトイベントも発生することです。mouseenter はこれをクリーンアップします。そして、ドロップダウンは、それをドロップダウンさせる親要素の子要素である必要があります。

<script type="text/javascript"> 
$(document).ready(function(){ 

     $(".sidebar").mouseenter( 
         function pl(){ 
               $(".sidebar").stop().animate({width: "184px",left:"760px"},750,"linear"); 
 }
     ); 
     $(".sidebar").mouseleave( 
          function pl2(){ 
               $(".sidebar").stop().animate({left: "900px",width: "45px"},750,"linear"); 
          }
     );

}); 
</script>

http://sdfreelance.vistapanel.net/のオンライン例

アップデート

最初の LI に関数を配置する必要があります。

<li id="dropdown">
   <a  href="/hosting">Why Veoloo</a>
   <ul class="dropdown-1">
      <li ><a href="#">The Reasons (15)</a></li> 
      <li ><a href="#">Customer Testimonials</a></li>
      <li ><a href="#">Our Support Scope</a></li>
   </ul>
</li>


    <script type="text/javascript"> 
    $(document).ready(function(){ 

     $("#dropdown").mouseenter(

タグで onmouseover を直接使用すると、マウスがメニュー上に移動する前に必要なスクリプトがすべてロードされていない場合、エラーが発生します。

于 2010-12-31T21:43:48.190 に答える