如何在第一次点击中运行jquery函数和在第二次点击中运行另一个函数

我有一个可用于jquery函数的html菜单。当有人点击父菜单项时，它显示的是子项，如果有另一个子项（孩子）显示，如果用户点击第一个子项，并且当他将鼠标移出父项时，每个子项和子项目不显示，因为这是有点混淆的用户我试图改变鼠标离开事件点击事件。如何在第一次点击中运行jquery函数和在第二次点击中运行另一个函数

<div style="margin-top: 200px; width: 140px; text-align: left;"> 
        <div> 
         <a href="#Home" onclick="close_this()" class="lmenu">Home</a> 
        </div> 
        <div> 
         <a href="#AboutUs" onclick="load_contents('aboutus.php', 400, '')" class="lmenu">About Us</a> 
        </div> 
        <div class="lmenu parent"> 
         <div> 
          <a href="#" class="lmenu">Our Services</a> 
         </div> 
         <div class="subperent"> 
          <a href="#"> 
           Event Management 
          </a> 
          <div class="chilld" onclick="load_contents('eventmngmnt.php', 400, 'categories.php')"> 
           <a class="lmenu" href="#"> 
            Categories 
           </a> 
          </div> 
          <div class="chilld" onclick="load_contents('providingfac.php', 800, '')"> 
           <a class="lmenu" href="#"> 
            Providing Facilities 
           </a> 
          </div> 
         </div> 
         <div class="subperent"> 
          <a href="#"> 
           Rental 
          </a> 
          <div class="chilld"> 
           <a class="lmenu" href="#" onclick="load_contents('avequipments.php', 850, '')"> 
            AVEquipments 
           </a> 
          </div> 
          <div class="chilld"> 
           <a class="lmenu" href="#" onclick="load_contents('otherservices.php', 850, '')"> 
            Other Services 
           </a> 
          </div> 
         </div> 
         <div class="subperent"> 
          <a href="#"> 
           Exhibition Stalls 
          </a> 
          <div class="chilld"> 
           <a class="lmenu" href="#standard_stall" onclick="load_contents('standardstalls.php', 600, '')"> 
            Standard Stall 
           </a> 
          </div> 
          <div class="chilld"> 
           <a class="lmenu" href="#designed_stall" onclick="load_contents('designedstalls.php', 600, '')"> 
            Designed Stalls 
           </a> 
          </div> 
         </div> 

         <div style="clear: both"></div> 
        </div> 
        <div class="lmenu parent"> 
         <div> 
          <a href="#" class="lmenu">Gallery</a> 
         </div> 
         <div class="subperent"> 
          <a class="lmenu" onclick="load_contents('gallery.php', 600, '')" href="#"> 
           Events & Confferance 
          </a> 
         </div> 
         <div class="subperent"> 
          <a class="lmenu" onclick="load_contents('gallery_stalls.php', 600, '')" href="#"> 
           Stalls 
          </a> 
         </div> 
        </div> 
       </div>

然后我使用这个jQuery脚本查看和隐藏菜单的子项和子项。

var $sub_itmes; 
$(".parent").on({ 
    click: function() { 
     $sub_itmes = $('.subperent', this); 
     $sub_itmes.css({ 
      "display": "block", 
     }); 
     $sub_itmes.animate({ 
      "opacity": 1 
     }); 
    }, 
    mouseleave: function() { 
     $sub_itmes = $('.subperent', this); 
     $sub_itmes.css({ 
      "display": "none", 
     }); 
     $sub_itmes.animate({ 
      "opacity": 0 
     }); 
    } 
}); 

$(".subperent").on({ 
    click: function() { 
     $sub_itmes = $('.chilld', this); 
     $sub_itmes.css({ 
      "display": "block", 
     }); 
     $sub_itmes.animate({ 
      "opacity": 1 
     }); 
    }, 
    mouseleave: function() { 
     $sub_itmes = $('.chilld', this); 
     $sub_itmes.css({ 
      "display": "none", 
     }); 
     $sub_itmes.animate({ 
      "opacity": 0 
     }); 
    } 
});

这段代码可以正常使用，但首先点击之后，我使用“鼠标离开”事件隐藏子项，但我需要的是“鼠标离开”事件转换为第二次点击。有人可以给我一个指导来做到这一点？

来源

2014-05-25 Yasitha

单击时，检查变量。如果不是这样，请将其设置为true。下次你点击，它会是真的，你可以做任何你想要的。 –

...或者在其处理程序结束时删除第一个事件侦听器，然后附加另一个事件侦听器。 – Teemu

或者你可以谷歌“切换事件替换”。你应该找到事件一个简单的插件来实现旧的切换事件。 – PeterKA

现在我正在使用这个jQuery代码，但仍然有一点问题，那就是当我点击父项目它显示的子项目，如果我点击它显示子项目的子项目。但如果我再次点击一个子项目，它隐藏了这些子项目，但问题是我不能让它隐藏子项目，当我点击第二次子项目时。

这不是一个大问题，所以我认为这是好的，所以我把这个作为我的答案，但是如果有人可以想出来隐藏子项目也对我有好处。

var $ showing_sub = 0; var $ showing_child = 0;

$(function() { 
    $('.parent').click(function() { 
     if ($showing_sub == 0) { 
      $sub_itmes = $('.subperent', this); 
      $sub_itmes.css({ 
       "display": "block", 
      }); 
      $sub_itmes.animate({ 
       "opacity": 1 
      }); 
     } 
     else 
     { 
      $sub_itmes = $('.subperent', this); 
      $sub_itmes.css({ 
       "display": "none", 
      }); 
      $sub_itmes.animate({ 
       "opacity": 0 
      }); 
      $showing_sub = 0; 
     } 
    }); 
}); 

$(function() { 
    $('.subperent').click(function() { 
     if ($showing_child == 0) { 
      $sub_itmes = $('.chilld', this); 
      $sub_itmes.css({ 
       "display": "block", 
      }); 
      $sub_itmes.animate({ 
       "opacity": 1 
      }); 

      $showing_child = 1; 
      //$showing_sub = 1; 
     } 
     else 
     { 
      $sub_itmes = $('.chilld', this); 
      $sub_itmes.css({ 
       "display": "none", 
      }); 
      $sub_itmes.animate({ 
       "opacity": 0 
      }); 
      $showing_child = 0; 

     } 
    }); 
});

来源

2014-05-25 10:48:56 Yasitha

如何在第一次点击中运行jquery函数和在第二次点击中运行另一个函数

回答

相关问题