1

jQueryでナビゲーションメニューを開発しています。そこで、最初のサブメニューを下にスライドし、右に2番目のサブメニューをスライドできるステップに来ました。マウスアウトするとフェードアウトします。しかし、問題は、2 回目にマウスオーバーしたときです。うまくいきません。初めてホバーするとうまくいきます。問題を認識できませんでした。マウスアウト機能は、実行後に完全に停止または復帰しないと思います。誰でもこの問題について提案してもらえますか

私のjQueryコード

  <script type="text/javascript">
       $(document).ready( function() {
           jQuery('.box1').mouseover(function() {
            ///$(".box2").stop().slideDown('slow');
                $('.box2').stop().animate({
                   height: 50
                }, 1000);
            });

            jQuery('.box1').mouseout(function() {
               $('.box2').stop().fadeOut();
               // $(".box2").stop().slideUp('slow');
            });

              jQuery('.box4').mouseover(function() {
              // $(".box3").stop().slideDown('slow');
              //$(".box3").show('slide', {direction: 'left'}, 800);

              $('.box3').stop().animate({
                     width: 200
                  }, 1000);
          });

          jQuery('.box4').mouseout(function() {
              //$(".box3").stop().slideUp('slow');
              // $(".box3").hide('slide', {direction: 'left'}, 800);
              $('.box3').stop().fadeOut();
          });
          });   
</script>

私のHTMLコード

<ul >
  <li class="box1"  >
    <div  class="box_sub" >Home</div>
    <ul>
      <li style="float:left;" class="box4"   >
        <div  id="box2" class="box2"  style="float:left">Sub 1.0</div>
        <ul style="float:left;">
          <li id="box3" class="box3"  style="float:left;clear:none;"  > Sub Sub 1.1</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

私のCSSコード

    .box_sub { 
       width: 200px;
       height: 50px;
       background-color: #0066CC;
       color: #FFF;
       text-align: center; 
       line-height: 50px;
       font: Verdana, Geneva, sans-serif;
       font-size: 14px;
       padding-top: 20px;
       padding-bottom: 20px;
       cursor: pointer;
    }
    .box2 {
       width: 200px;
       height: 0px;
       background-color: #0066CC;
       color: #FFF;
       text-align: center; 
       line-height: 50px;
       font: Verdana, Geneva, sans-serif;
       font-size: 14px;
       cursor: pointer; 
    }
   .box3 {
       width: 0px;
       height: 50px;
       background-color: #0066CC;
       color: #FFF;
       text-align: center; 
       line-height: 50px;
       font: Verdana, Geneva, sans-serif;
       font-size: 14px;
       padding-top: 20px;
       padding-bottom: 20px;
       cursor: pointer; 
   }
   .box1 {
       min-width: 200px;
   }
   ul { 
      list-style: none;
   }
   ul {
      margin: 0;
      padding: 0;
   }
   li {
      margin: 0;
      padding: 0;
   }

私のjsFiddleリンクはこちら..

4

2 に答える 2

3

必要なコードが多すぎる

この作業フィドルを試してください

$("#nav li").hover(
    function(){
        $(this).children('ul').hide();
        $(this).children('ul').slideDown('slow');
    },
    function () {
        $('ul', this).slideUp('slow');            
    });
于 2013-07-15T09:55:32.523 に答える