Question

我想关闭login-content div，当我在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;')
   }) 
 });

Answer 1

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

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

如果login-content 有效，则触发点击事件并隐藏div。

见下面的演示：

＆＃13;

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

＆＃13;

#login-content {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 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 }
}

我将添加以下正文处理程序：

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

Answer 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/

单击外部div以关闭div

3 个答案: