javascript - 当用户使用 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>

我想在用户单击登录时show()表单，并在用户单击其他地方时hide()表单，使用jQuery。

读完这个答案后我使用这个jquery代码:How to hide ul using jquery when users click elsewhere

JS

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

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

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

欢迎任何解决问题的建议!

Answer 1

Demo

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

这是您要找的吗？