当用户使用jquery点击任何位置时，切换并隐藏登录表单

Toggle and Hide Login form when users click anywhere using jquery

本文关键字：隐藏 表单 登录 位置 用户 jquery 任何      更新时间：2023-12-10

所以我在li标记中有一个登录表单。

HTML

<div class='container'>
    <ul class="pull-right">
        <li><a href="#" class="nav-bar">A</a></li>
        <li><a href="#" class="nav-bar">E</a></li>
        <li><a href="#" class="lion">Login</a>
            <div class="eagle form">
                <form>
                    ...
                </form>
            </div>
        </li>
    </ul>
</div>

我想在用户单击login时show()表单，在用户单击其他位置时hide()表单，使用jquery。

在阅读了这个答案后，我使用了这个jquery代码：当用户点击其他时，如何使用jquery隐藏ul

JS-

$(function () {
  var sesion = $('.eagle.form');
  $('.lion').on('click', function (e) {
      e.stopPropagation();
      sesion.toggle();
  });
  $(document).on('click', function (e) {
      sesion.toggle();
  });
});

然而，当登录表单出现并且我想与上面的字段交互时，它会再次隐藏起来。

如何修复代码？我想我漏了一行。

欢迎提出任何解决问题的建议！

演示

HTML:

<ul>
  <li>
    <a href="#">test</a>
  </li>
  <div class="meh">
    <li> <a href="#" class="toggleForm">Form</a>
      <ul class="form">
        <li>
          <form>
            <input type="text" />
            <input type="submit" />
          </form>
        </li>
      </ul>
    </li>
  </div>
</ul>

Js:

$(".form").hide();
$(".toggleForm").click(function() {
  $(".form").toggle();
});
$(document).on("click", function(e) {
  if ($(e.target).closest(".meh").length == 0) {
    $(".form").hide();
  }
});

这就是你要找的吗？

使用这个问题的解决方案：当用户点击外部时，使用jQuery隐藏div

$(document).mouseup(function (e) {
    var container = $('.form');
    if (!container.is(e.target)
        && container.has(e.target).length === 0) {
        container.hide();
    }
    $('HERE-GOES-li-CONTAINER').click( function(event) {
        $('.form').toggle();
    });
});
相关文章：