如何在第一次點擊中運行jquery函數和在第二次點擊中運行另一個函數

Question

我有一個可用於jquery函數的html菜單。當有人點擊父菜單項時，它顯示的是子項，如果有另一個子項（孩子）顯示，如果用戶點擊第一個子項，並且當他將鼠標移出父項時，每個子項和子項目不顯示，因爲這是有點混淆的用戶我試圖改變鼠標離開事件點擊事件。

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

這段代碼可以正常使用，但首先點擊之後，我使用「鼠標離開」事件隱藏子項，但我需要的是「鼠標離開」事件轉換爲第二次點擊。 有人可以給我一個指導來做到這一點？

Answer 1

現在我正在使用這個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; 

     } 
    }); 
});