如何在單擊 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() }); }); });