どこかをクリックしてハンバーガーメニューを閉じる

Question

この質問は何回か答えられたことがわかりました。私はそれを私のために働かせることはできません。 私は自分のサイトにハンバーガーメニューを置いて、どこでもメニューを閉じることができます。 私が使用しているjQueryのは、次のとおりです。

$(document).ready(function() { 
    $(".cross").hide(); 
    $(".menu").hide(); 
    $(".hamburger").click(function() { 
     $(".menu").slideToggle("slow", function() { 
      $(".hamburger").hide(); 
      $(".cross").show(); 
     }); 
    }); 

    $(".cross").click(function() { 
     $(".menu").slideToggle("slow", function() { 
      $(".cross").hide(); 
      $(".hamburger").show(); 
     }); 
    }); 

}); 

私は本当に近い機能を追加する方法についてのアドバイスをいただければと思います。 ありがとう、 Shaun。

Answer 1

// when click on window 
function actionwindowclick(elem , action){ 
    $(window).on('click',function(e){ 
     if (!$(elem).is(e.target) // if the target of the click isn't the container... 
      && $(elem).has(e.target).length === 0) // ... nor a descendant of the container 
     { 
      action(); 
     } 
    }); 
} 

と、この機能を使用する

actionwindowclick('.cross , .hamburger', function(){ 
    $(".hamburger").hide(); 
}); 

サンプル

$(document).ready(function(){ 
 
    
 
    $(".cross").click(function(){ 
 
    $('.hamburger').show(); 
 
    }); 
 
    
 
    
 
    
 
    // run function here 
 
    actionwindowclick('.cross , .hamburger', function(){ 
 
     $(".hamburger").hide(); 
 
    }); 
 
}); 
 

 

 
// when click on window 
 
function actionwindowclick(elem , action){ 
 
\t $(window).on('click',function(e){ 
 
\t \t if (!$(elem).is(e.target) // if the target of the click isn't the container... 
 
\t   && $(elem).has(e.target).length === 0) // ... nor a descendant of the container 
 
\t  { 
 
\t \t \t action(); 
 
\t  } 
 
\t }); 
 
}

.hamburger{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="cross">Cross Div</div> 
 
<div class="hamburger"> 
 
    Hamburger Div 
 
</div>

Answer 2

使用

focusout

$（ '＃P'）.focusout（関数（）{ $（ '＃のmyDiv'））（非表示;}）あなたはこの機能を使用することができます