如何在单击 div 时显示和关闭表单？

Question

单击 div 时，我想显示一个表单，如本页中所做的那样。 这是我尝试过的（小提琴）：

$(document).on("click","#tawkchat-minified-container",function() {
    var htmldynamic = '  <form id="test" action="test.php">\
<div>\
  Test: <input name="blah" value="test" type="text">\
</div>\
</form>'
    $("#maximizeChat").html(htmldynamic);
});

我不知道这是否是正确的方法。 有没有更好的方法？

Answer 1

将大块 HTML 添加为 JavaScript 变量并不是一个好习惯。 很容易在 HTML 中出错，因为您必须笨拙地阅读嵌入在 JS 中的 HTML。

更好的方法是将 HTML 代码包含在标记的其余部分中，但使用 CSS 将其隐藏。 然后你可以在按下它时使用 JavaScript 显示它。

HTML：

<div id="my-form-container">
  <div id="my-form-header">My form</div>
  <form id="my-form" action="test.php">
    <div>
      Test: <input name="blah" value="test" type="text">
    </div>
  </form>
</div>

CSS：

#my-form { 
  display: none; /* This will hide the form. */
}

JavaScript：

//When the container is clicked...
$("#my-form-container").click(function() {
  //...show the form.
  $("#my-form").show();
});

Answer 2

使用这种方法肯定能解决你的问题

 $(document).ready(function(){ $("#tawkchat-minified-agent-container").click(function() var hlink = $("#test").val(); $("#test").click(function(){ $(".form").show() }); }); });