0

お問い合わせフォームのボタンをクリックして表示/非表示にしたいと思います。現在、2 つのボタンを使用して次の「表示 - 非表示」jquery 関数を使用していますが、それを拡張する方法がわからないため、表示と非表示の両方に同じボタンを使用し、フォームの可視性をメッセージに反映します。

  • 「Write me」ボタンを最初にクリックすると、フォームが表示され、ボタンのテキストが「今はメッセージを書きたくない」に変わります。

  • もう一度クリックすると、フォームが非表示になり、「Write me」に戻ります

      <script>
  $(document).ready(function(){
  $("#hide").click(function(){
  $("#par").hide();
  });
  $("#show").click(function(){
  $("#par").show();
  });
  });
  </script>

<button id="hide">Hide</button>
<button id="show">Write me</button>
<div id="par">
<p>
<input type="email" name="email" id="email" placeholder="email" autofocus required>
</p>
<p>
    <input type="text" name="subject" id="name" placeholder="subject" autofocus required>
</p>
<p>
    <input type="text" name="message" id="message" placeholder="message" autofocus required>
</p>
<p>
    <input type="submit" name="send" id="send" value="Send">
</p>
</div>


#par{display:none;}
4

6 に答える 6

0

これを試してみてください： - http://jsfiddle.net/adiioo7/E3YCm/

JS:-

  $(document).ready(function () {
      $("#button").click(function () {
          $("#par").toggle(function () {
              if ($("#button").val() == "Hide") $("#button").val("Show");
              else $("#button").val("Hide");
          });
      });
  });

HTML:-

<div id="par">Show/Hide Text</div>
<input type="button" id="button" value="Hide">

CSS:-

#par {
    display:none;
}
于 2013-09-26T08:57:14.390 に答える