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

});

我非常感谢有关如何添加关闭功能的建议。谢谢，肖恩。

Answer 1

使用focusout

$（'＃p'）。focusin（function（）{ $（ '＃myDiv'）隐藏（）。 }）

Answer 2

你可以使用这个功能

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

.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>

点击任意位置关闭汉堡包菜单

2 个答案: