javascript - 单击时切换和高度调整

Question

我正在尝试单击一个按钮，该按钮使按钮所在容器的大小在单击按钮后变得更高。但它不起作用

代码是:

HTML

  <div id="dynamicInput" class="dynamicInput">

    <form name="new_addon" id="new_addon" method="post">

     <input type="text" id="Product_name" name="Product_name" value="" placeholder="Product Name">
     <input type="number" id="addon_price" name="addon_price" value="" placeholder="Additional Costs" maxlength="30" required>
     <!--Add add-ons to product button -->
     <input type="button" id="add_prod" name="add_prod" value="Add Option " >
     <input type="button" id="new" value="Add another text input" onClick="addInput('dynamicInput');">

    </form> 
  </div>

JS

   $(document).ready(function (){
      $("#add_prod").on("click", function (){
        if ($(".dynamicInput").height() == 200) {
           $(".dynamicInput").animate(
               {height: "300px"});
           }
        else if ($(".dynamicInput").height() == 300) {
           $(".dynamicInput").animate({height: "200px"});
           }
        });
    });

我哪里出错了？

Answer 1

没问题，你应该在 div 中 position:absolute

 <div id="dynamicInput" class="dynamicInput" style="position:absolute;height:200px;background-color:red;" >

结果:https://jsfiddle.net/cmedina/c9vsgauu/