单击 div 外部关闭 div答案

【问题标题】：Clicking outside div to close the div单击 div 外部关闭 div
【发布时间】：2017-08-23 07:21:11
【问题描述】：

当我点击 div 外部时，我想关闭 login-content div 我尝试了事件但它不起作用

我有这个 html 代码

 <nav class="login">
  <ul>
     <li id="login">
    <a id="login-trigger" href="#">
      Log in <span>▼</span>
      </a>
     <div id="login-content">
    <form>
      <fieldset id="inputs">
        <input id="username" type="text" name="uname"   
          placeholder="University ID" required>   
        <input id="password" type="password" name="Password" 
              placeholder="Password" required>
      </fieldset>
      <fieldset id="actions">
        <input type="submit" id="submit" value="Log in">
        <label><input type="checkbox" checked="checked"> Keep me signed 
          in</label>
      </fieldset>
    </form>
    </div>                     
  </li>
</ul>

这个js文件script.js

$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');          

  if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
    else $(this).find('span').html('&#x25BC;')
   }) 
 });

【问题讨论】：

请提供一些更完整的代码
您需要删除登录内容吗？或者只是隐藏它？

标签： javascript jquery html

【解决方案1】：

您可以在 #login-trigger 上使用 blur 事件 - 请注意，您必须将 tabindex 属性添加到 #login-trigger 元素。

$('#login-trigger').blur(function() {
  if ($(this).hasClass('active'))
    $(this).trigger('click');
});

如果login-content 处于活动状态，这将触发点击事件并隐藏 div。

请看下面的演示：

$(document).ready(function() {
  $('#login-trigger').click(function() {
    $(this).next('#login-content').slideToggle();
    $(this).toggleClass('active');

    if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
    else $(this).find('span').html('&#x25BC;')
  })
  
  $('#login-trigger').blur(function() {
    if ($(this).hasClass('active'))
      $(this).trigger('click');
  });
});

#login-content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="login">
  <ul>
    <li id="login">
      <a id="login-trigger" href="#" tabindex='-1'>
      Log in <span>▼</span>
      </a>
      <div id="login-content">
        <form>
          <fieldset id="inputs">
            <input id="username" type="text" name="uname" placeholder="University ID" required>
            <input id="password" type="password" name="Password" placeholder="Password" required>
          </fieldset>
          <fieldset id="actions">
            <input type="submit" id="submit" value="Log in">
            <label><input type="checkbox" checked="checked"> Keep me signed 
          in</label>
          </fieldset>
        </form>
      </div>
    </li>
  </ul>

【讨论】：

【解决方案2】：

在这种情况下，我会将 mouseEventHandler 添加到正文中。以下是我保留的实用功能。

function _wasElemClicked(element, e: MouseEvent) {
    let { clientX: x, clientY: y } = e;
    let { height, width, top, left } = _getDimensions(element);
    if ((x > left && x < left + width) &&
        (y > top && y < top + height)) {
        return true;
    }
    return false;
}

function _getDimensions(elem) {
    let { height, width, top, left } = elem.getBoundingClientRect();
    return { height, width, top, left }
}

我将添加以下 body-click 处理程序：

const bodyClick = e => {
  if(!_wasElemClicked(targetElem, e) {
    // close modal/dialog/popup
    ...
    // cleanup event listener
    document.body.removeEventHandler('click', bodyClick);
  }
}
document.body.addEventHandler('click', bodyClick);

【讨论】：

【解决方案3】：

你的html代码没问题，需要改js，

 $(document).ready(function(){
    $('#login-trigger').click(function(event){
        event.stopPropagation();
         $("#login-content").slideToggle();
    });
    $("#login-content").on("click", function (event) {
        event.stopPropagation();
    });
});

$(document).on("click", function () {
    $(".showup").hide();
});

在这里工作小提琴链接，

http://jsfiddle.net/evGd6/2/

【讨论】：