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

Question

问题:

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

---

我想做什么:

1. The form will be hidden by default.
2. When a user hovers over an image button, the form should be shown and hidden after the mouseleave.
3. If the user clicks the button, then the form should stay visible so that the user can enter the data and sumbit it.

---

观察:

1. The objectives #1 and #2 from above are working as expected.
2. As opposed to objective #3, the form automatically hides even after the button click.

---

不成功的方法:

1. Using .show() instead of .css("display","block")
2. Using form:hover to set display:block.
3. Using setTimeout(hide_function,500) hides the form after 500ms regardless of the button click.

---

代码:

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

---

引用资料:

1. For button click detection.
2. For changing display property.

Answer 1

只需更改数据属性:

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

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