0

マウスが要素の上にあるかどうかをjQueryでチェックするのに助けが必要です。

http://mashable.comのナビゲーションのように機能するには、これが必要です。

私はこれを持っています：

<div id="main_nav">
  <ul>
<li href="#tab1">Nav Tab 1</li>
<li href="#tab2">Nav Tab 2</li>
  </ul>
</div>
<div id="main_nav_expansion">
  <ul class="navtab" id="tab1">
    <li>Submenu Title Here
   <ul>
     <li>Sublink Option</li>
     <li>Sublink Option</li>
   </ul>
</li>
  </ul><!-- end navtab 1 -->
  <ul class="navtab" id="tab2">
    <li>Submenu Title Here
   <ul>
     <li>Sublink Option</li>
     <li>Sublink Option</li>
   </ul>
</li>
  </ul><!-- end navtab 2 -->
 </div>

この jQuery を作成しましたが、「Nav Tab 1」または「Nav Tab 2」からマウスを離したときに、ul.navtab を開いたままにすることができません。マウスが要素の上にあるかどうかを確認するために、コールバック関数内に条件ステートメントを記述しようとしましたが、機能しません。

これはjQueryコードです：

jQuery(document).ready(function(){

   $('ul.navtab').hide();

   $('#main_nav ul li').hover(function(){
   $('#main_nav ul li.active').removeClass('active');
   $(this).addClass("active");
   var activeNavTab = $(this).attr("href");
   $(activeNavTab).addClass("active").slideDown();
   },function(){
   if($("ul.navtab").is(":hover")){
   $("ul.navtab").show();
   }else{
      $("ul.navtab").slideUp();
      $('#main_nav ul li.active').removeClass('active');
   }
});
4

1 に答える 1

0

これを試すことができます：

jQuery(document).ready(function () {

$('ul.navtab').hide();

   $('#main_nav ul li').hover(function () {
      $('#main_nav ul li.active').removeClass('active');
      $(this).addClass("active");
      var activeNavTab = $(this).attr("href");
      $(activeNavTab).siblings().removeClass("active").hide();
      $(activeNavTab).addClass("active").slideDown();
  });
  $('.navtab').on({
    mouseleave: function(){
    $('.active').removeClass('active');
    $('this').fadeOut();
    }
  });
});

コールバックの必要はないと思います。

最後のフィドルをチェックアウトします。

于 2013-03-02T02:54:14.517 に答える