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

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

只需更改数据attr：

 $('#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/