Question

当用户点击名为#startMnu的div时，我想隐藏div .startBtn。我无法使用本教程https://jsfiddle.net/KyleMit/tHCUB/来解决这个问题，无论我在哪里点击它，都说它不在盒子里。

$(".startBtn").click(function() { 
    $(".startBtn").fadeToggle(200); 
    $("#startMnu").toggle(200); 
}); 

$("body").clickOff(function() {       
    alert('clickOff'); 
});

这些最后一行代码是jsfiddle中javascript部分改变的唯一代码。

我正在尝试创建一个菜单，您可以在其中单击菜单按钮，打开它，然后通过再次单击按钮或单击div来关闭它。现在，只要我点击，警报就会弹出。想法？

编辑：

//Effects.js
$(function() {
  $(".startBtn").click(function() {
    $(".startBtn").fadeToggle(200);
    $("#startMnu").toggle(200);
  });
});
$.fn.clickOff = function(callback, selfDestroy) {
  var clicked = false;
  var parent = this;
  var destroy = selfDestroy || true;

  parent.click(function() {
    clicked = true;
  });

  $(document).click(function(event) {
    if (!clicked) {
      callback(parent, event);
    }
    if (destroy) {
      //parent.clickOff = function() {};
      //parent.off("click");
      //$(document).off("click");
      //parent.off("clickOff");
    };
    clicked = false;
  });
};

$(".startBtn").click(function(event) {
  event.stopPropagation();
  $("#startMnu").toggle();
});

$("body").click(function() {
  $("#startMnu").hide();
});

/* effects.css */

#startBtn {
  position: absolute;
  transition: all ease 200ms;
}
#startBtn:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
#startBtnHvr {
  display: none;
  position: absolute;
  transition: all ease 0ms;
}
.startBtn {
  width: 64px;
  height: 64px;
}
/* style.css */

body {
  background-image: url("background.png") no-repeat center center fixed;
  overflow: hidden;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Tahoma, Geneva, sans-serif;
  color: #333;
}
#startMnu {
  display: none;
  padding: 280px 180px;
  background: linear-gradient(to bottom right, rgba(86, 11, 3, .8), rgba(4, 74, 100, .8));
  /* Standard syntax */
  float: left;
  position: absolute;
  border-radius: 1px;
  border: 2px solid #333;
  margin-left: -8px;
  margin-top: 100px;
}

<!DOCTYPE HTML>
<html>

<head>
  <title>Online OS</title>
  <link rel="icon" type="image/png" href="ico_default.png">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
  <script type="text/javascript" src="effects.js"></script>
  <link href="effects.css" rel="stylesheet" type="text/css" id="sheet1">
  <link href="style.css" rel="stylesheet" type="text/css" id="sheet1">
</head>

<body>
  <img id="startBtn" class="startBtn" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/2000px-Circle_-_black_simple.svg.png" alt="" />
  <img id="startBtnHvr" class="startBtn" src="http://cdnl.accucutcraft.com/media/catalog/product/cache/2/image/9df78eab33525d08d6e5fb8d27136e95/C/R/CR210.jpg" alt="" />
  <div id="startMnu">
    <h2 style=" float:left; position:absolute; margin-left:-95px; margin-top:-270px;" class="rename">Popup<h2>
    </div>
</body>
</html>

这就是我的意思，虽然在片段中有轻微错误。

Answer 1

试试这个

$(".startBtn").click(function(event) {
  event.stopPropagation();
  $("#startMenu").slideToggle("slow");
});

$("#startMenu").click(function(event) {
  event.stopPropagation();
});

$("body").click(function() {
  $("#startMenu").slideUp("slow");
});

#startMenu {
  background: red;
  height: 100px;
  width: 100px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="startBtn">Menu</button>
<br><br>
<div id="startMenu">startMnu</div>

Answer 2

你可以在html上设置一个事件监听器来隐藏它，并在点击时使用stopPropagation（）来忽略它.startBtn

$('html').click(function() {
    alert('clickOff'); 
});

$(".startBtn").click(function(event){
    event.stopPropagation();
    $(".startBtn").fadeToggle(200); 
    $("#startMnu").toggle(200);
});

Answer 3

避免不必要的事件处理的最佳方法是在菜单单击中绑定正文单击，如下所示：

//persist your current menu state
var open = false;

function clickOn() {

    //force open the menu rather than toggle
    //so you are in control of the state
    $(".startBtn").fadeOut(200);
    $("#startMnu").fadeIn(200);

    open = true;

    //bind the body click
    $("body").on("click.menu", function(event) {
        clickOff(event);
    });
}

function clickOff() {
    $(".startBtn").fadeIn(200);
    $("#startMnu").fadeOut(200);

    open = false;

    //unbind the body click so it doesn't happen when the menu is closed
    $("body").unbind("click.menu");
}

$(".startBtn").click(function(e) {
    //stop the event bubbling up to the body
    e.stopPropagation();

    //check the current state
    open ? clickOff() : clickOn();
});

Answer 4

$(".startBtn").click(function() { 
    $(".startBtn").fadeToggle(200);
    $("#startMnu").toggle(200);
}); 

$("body").click(function(event) {
    if(!$(event.target).closest('#startMnu').length && !$(event.target).closest('.startBtn').length) {
       $(".startBtn").fadeToggle(200);
        $("#startMnu").toggle(200);
    }
});

.menu {
  position: relative;
  min-height: 60px;
}
#startMnu {
  background: #ffc501;
  position: absolute;
  list-style: none;
  width: 320px;
  display: none;
  padding: 0;
  margin: 0;
  top: 100%;
  left: 0;
}

#startMnu li a {
  text-decoration: none;
  padding: 3px 8px;
  display: block;
  color: #fff;
}

#startMnu li a:hover {
  background: #ffe501;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="menu">
  <button class="startBtn">Opener</button>
  <ul id="startMnu">
     <li><a href="#">Menu Item 1</a></li>
     <li><a href="#">Menu Item 2</a></li>
     <li><a href="#">Menu Item 3</a></li>
     <li><a href="#">Menu Item 4</a></li>
     <li><a href="#">Menu Item 5</a></li>
  </ul>
</nav>

在div之外的onclick，隐藏div

4 个答案: