Question

我有两个类似的jquery函数（一个用于鼠标悬停，另一个用于点击），它们似乎互相干扰。第一个是在悬停时使用jquery ui switchclass更改背景。这也带来了一个子菜单。当您单击子菜单中的链接时，它会触发一个删除上一个菜单的单击功能。并使用switchclass更改该背景。问题是，只要您移动鼠标，它就会触发鼠标输出并将背景更改回默认背景。

这是鼠标悬停。

     $('.hoverbg').mouseover(
  function(){
   var newimg = $(this).attr('data-bgsrc');
   $('#bg img[src="'+newimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad");
   $('#bg img[src!="'+newimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad");
  });
$('.nav').mouseout
 (function(){
    if ($('#sitewrapper').hasClass("c"))
    {
      event.stopImmediatePropagation()
    }
    else
    {
      $('#bg img[src="images/bg.jpg"]').switchClass("inactive", "active", 0, "easeInOutQuad");
      $('#bg img[src!="images/bg.jpg"]').switchClass("active", "inactive", 0, "easeInOutQuad");
    }
  });

这是点击事件。它隐藏了属于mouseout的nav类。从技术上讲，我猜这已经让你使用该菜单的鼠标输出，但我已经将它添加到sitewrapper div中，如果该类存在则停止。

    $('a#navclick').click(function(){
 var iclick = $(this).attr('data-iclick');
 var clickimg = $(this).attr('click-data-bgsrc');
 if ($('#topId').hasClass('.topOn'))
 {
   $('#bg img[src="'+clickimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad");
   $('#bg img[src!="'+clickimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad");
 }
 else
 {
 $('#sitewrapper').addClass("c");
 $('img.logo').hide("drop", {direction: "down"}, 1000);
 $('.nav').hide("drop", {direction: "down"}, 1000);
 $('#bg img[src="'+clickimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad");
 $('#bg img[src!="'+clickimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad");
 $('#topId').addClass('topOn');
 $('#topId').show("slide", {direction:"up"}, 1000);
 }
 });

Answer 1

我知道了。点击功能很好，看起来像这样;

    $('a#navclick').click(function(){
 var iclick = $(this).attr('data-iclick');
 var clickimg = $(this).attr('click-data-bgsrc');
 if ($('#topId').hasClass('topOn'))
 {
   $('#bg img[src="'+clickimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad");
   $('#bg img[src!="'+clickimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad");
 }
 else
 {
 $('#topId').addClass('topOn');
 $('img.logo').hide("drop", {direction: "down"}, 1000);
 $('.nav').hide("drop", {direction: "down"}, 1000);
 $('#bg img[src!="'+clickimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad");
 $('#bg img[src="'+clickimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad");
 $('#topId').show("slide", {direction:"up"}, 1000);
 }
 });

悬停功能需要if语句才能在发生单击时停止它。所以我让click事件将一个类添加到一个名为topOn的div中。然后添加了一个if语句，用于检查该div是否具有topOn类。它看起来像这样;

     $('.hoverbg').mouseenter(
  function(){
   var newimg = $(this).attr('data-bgsrc');
   $('#bg img[src="'+newimg+'"]').switchClass("inactive", "active", 0, "easeInOutQuad");
   $('#bg img[src!="'+newimg+'"]').switchClass("active", "inactive", 0, "easeInOutQuad");
  });
$('.hoverbg').mouseleave
 (function(){
   if(jQuery('#topId').hasClass('topOn'))
   {
     jQuery('.hoverbg').stop();
   }
   else
   {
    $('#bg img[src="images/bg.jpg"]').switchClass("inactive", "active", 0, "easeInOutQuad");
    $('#bg img[src!="images/bg.jpg"]').switchClass("active", "inactive", 0, "easeInOutQuad");
   }
 });

两个相互干扰的jquery函数

1 个答案: