单击按钮后无法显示表单元素

Question

问题：

我正在尝试从按钮实现下拉表单。但是，即使在满足条件后，表单也无法保持可见，我遇到了问题。我是 javascript 和 css 的新手，如果这是一个愚蠢的错误，请多多包涵。提前致谢。

---

我想做什么：

1. 默认情况下会隐藏表单。
2. 当用户将鼠标悬停在图像按钮上时，表单应在鼠标离开后显示和隐藏。
3. 如果用户单击按钮，则表单应保持可见，以便用户可以输入数据并将其汇总。

---

观察：

1. 上面的目标 #1 和 #2 正在按预期工作。
2. 与目标 #3 不同，即使在单击按钮后表单也会自动隐藏。

---

不成功的方法：

1. 使用.show() 代替.css("display","block")
2. 使用form:hover 设置display:block。
3. 使用setTimeout(hide_function,500) 会在 500 毫秒后隐藏表单，无论按钮是否单击。

---

代码：

这是我的jsfiddle 的链接，您可以使用它来测试它。

---

参考资料：

1. 发给button click detection。
2. 发给changing display property。

Answer 1

只需更改数据属性：

 $('#dropbtn').click(function() {
  $(this).data('clicked', 'yes');
  $('#loginForm').css('display', 'block');
});

https://jsfiddle.net/d3h8gvek/3/#run //固定结果

Answer 2

我已经稍微修改了你的代码，请用小提琴检查

$('#dropbtn').click(function() {
  $(this).data('clicked', 'yes');
  $('#loginForm').addClass('activate');
});

https://jsfiddle.net/d3h8gvek/7/