当用户使用 jquery 单击任意位置时切换和隐藏登录表单

Question

所以我在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 代码： How to hide ul using jquery when users click others

JS

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

但是，当登录表单出现并且我想与其上的字段进行交互时，它再次隐藏。

我该如何修复代码？ 我想我错过了一行。

任何解决问题的建议都是appreacited！

Answer 1

演示

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

这是你要找的吗？

Answer 2

使用这个问题的解决方案： Use jQuery to hide a DIV when the user clicks outside of it

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