切換和高度調整onclick

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

那是工作，你應該position:absolute在DIV

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

結果：https://jsfiddle.net/cmedina/c9vsgauu/

Answer 2

嘗試#dynamicInput上，而不是.dynamicInput