Question

我需要帮助制作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');
   }
});

Answer 1

你可以尝试这个：

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();
    }
  });
});

我认为没有必要进行回调。

checkout the final fiddle.

jQuery检查鼠标是否结束

1 个答案: